This is page 21 of 181. Use http://codebase.md/xmlui-org/xmlui/%7B$item.flickr_images[0]%7D?format=md&lines=true&page={x} to view the full context.

# Directory Structure

```
├── .changeset
│   └── config.json
├── .eslintrc.cjs
├── .github
│   ├── build-checklist.png
│   ├── ISSUE_TEMPLATE
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   └── workflows
│       ├── deploy-blog.yml
│       ├── deploy-docs-optimized.yml
│       ├── deploy-docs.yml
│       ├── prepare-versions.yml
│       ├── release-packages.yml
│       ├── run-all-tests.yml
│       └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│   ├── launch.json
│   └── settings.json
├── blog
│   ├── .gitignore
│   ├── .gitkeep
│   ├── CHANGELOG.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── layout-changes.md
│   ├── package.json
│   ├── public
│   │   ├── blog
│   │   │   ├── images
│   │   │   │   ├── blog-page-component.png
│   │   │   │   ├── blog-scrabble.png
│   │   │   │   ├── integrated-blog-search.png
│   │   │   │   └── lorem-ipsum.png
│   │   │   ├── lorem-ipsum.md
│   │   │   ├── newest-post.md
│   │   │   ├── older-post.md
│   │   │   └── welcome-to-the-xmlui-blog.md
│   │   ├── mockServiceWorker.js
│   │   ├── resources
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   └── for-download
│   │   │   │       └── xmlui
│   │   │   │           └── xmlui-standalone.umd.js
│   │   │   ├── github.svg
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   ├── rss.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   └── PageNotFound.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       └── blog-theme.ts
│   └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│   ├── .gitignore
│   ├── CHANGELOG.md
│   ├── ComponentRefLinks.txt
│   ├── content
│   │   ├── _meta.json
│   │   ├── components
│   │   │   ├── _meta.json
│   │   │   ├── _overview.md
│   │   │   ├── APICall.md
│   │   │   ├── App.md
│   │   │   ├── AppHeader.md
│   │   │   ├── AppState.md
│   │   │   ├── AutoComplete.md
│   │   │   ├── Avatar.md
│   │   │   ├── Backdrop.md
│   │   │   ├── Badge.md
│   │   │   ├── BarChart.md
│   │   │   ├── Bookmark.md
│   │   │   ├── Breakout.md
│   │   │   ├── Button.md
│   │   │   ├── Card.md
│   │   │   ├── Carousel.md
│   │   │   ├── ChangeListener.md
│   │   │   ├── Checkbox.md
│   │   │   ├── CHStack.md
│   │   │   ├── ColorPicker.md
│   │   │   ├── Column.md
│   │   │   ├── ContentSeparator.md
│   │   │   ├── CVStack.md
│   │   │   ├── DataSource.md
│   │   │   ├── DateInput.md
│   │   │   ├── DatePicker.md
│   │   │   ├── DonutChart.md
│   │   │   ├── DropdownMenu.md
│   │   │   ├── EmojiSelector.md
│   │   │   ├── ExpandableItem.md
│   │   │   ├── FileInput.md
│   │   │   ├── FileUploadDropZone.md
│   │   │   ├── FlowLayout.md
│   │   │   ├── Footer.md
│   │   │   ├── Form.md
│   │   │   ├── FormItem.md
│   │   │   ├── FormSection.md
│   │   │   ├── Fragment.md
│   │   │   ├── H1.md
│   │   │   ├── H2.md
│   │   │   ├── H3.md
│   │   │   ├── H4.md
│   │   │   ├── H5.md
│   │   │   ├── H6.md
│   │   │   ├── Heading.md
│   │   │   ├── HSplitter.md
│   │   │   ├── HStack.md
│   │   │   ├── Icon.md
│   │   │   ├── IFrame.md
│   │   │   ├── Image.md
│   │   │   ├── Items.md
│   │   │   ├── LabelList.md
│   │   │   ├── Legend.md
│   │   │   ├── LineChart.md
│   │   │   ├── Link.md
│   │   │   ├── List.md
│   │   │   ├── Logo.md
│   │   │   ├── Markdown.md
│   │   │   ├── MenuItem.md
│   │   │   ├── MenuSeparator.md
│   │   │   ├── ModalDialog.md
│   │   │   ├── NavGroup.md
│   │   │   ├── NavLink.md
│   │   │   ├── NavPanel.md
│   │   │   ├── NoResult.md
│   │   │   ├── NumberBox.md
│   │   │   ├── Option.md
│   │   │   ├── Page.md
│   │   │   ├── PageMetaTitle.md
│   │   │   ├── Pages.md
│   │   │   ├── Pagination.md
│   │   │   ├── PasswordInput.md
│   │   │   ├── PieChart.md
│   │   │   ├── ProgressBar.md
│   │   │   ├── Queue.md
│   │   │   ├── RadioGroup.md
│   │   │   ├── RealTimeAdapter.md
│   │   │   ├── Redirect.md
│   │   │   ├── Select.md
│   │   │   ├── Slider.md
│   │   │   ├── Slot.md
│   │   │   ├── SpaceFiller.md
│   │   │   ├── Spinner.md
│   │   │   ├── Splitter.md
│   │   │   ├── Stack.md
│   │   │   ├── StickyBox.md
│   │   │   ├── SubMenuItem.md
│   │   │   ├── Switch.md
│   │   │   ├── TabItem.md
│   │   │   ├── Table.md
│   │   │   ├── TableOfContents.md
│   │   │   ├── Tabs.md
│   │   │   ├── Text.md
│   │   │   ├── TextArea.md
│   │   │   ├── TextBox.md
│   │   │   ├── Theme.md
│   │   │   ├── TimeInput.md
│   │   │   ├── Timer.md
│   │   │   ├── ToneChangerButton.md
│   │   │   ├── ToneSwitch.md
│   │   │   ├── Tooltip.md
│   │   │   ├── Tree.md
│   │   │   ├── VSplitter.md
│   │   │   ├── VStack.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   ├── xmlui-spreadsheet
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Spreadsheet.md
│   │   │   └── xmlui-website-blocks
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       ├── Carousel.md
│   │   │       ├── HelloMd.md
│   │   │       ├── HeroSection.md
│   │   │       └── ScrollToTop.md
│   │   └── extensions
│   │       ├── _meta.json
│   │       ├── xmlui-animations
│   │       │   ├── _meta.json
│   │       │   ├── _overview.md
│   │       │   ├── Animation.md
│   │       │   ├── FadeAnimation.md
│   │       │   ├── FadeInAnimation.md
│   │       │   ├── FadeOutAnimation.md
│   │       │   ├── ScaleAnimation.md
│   │       │   └── SlideInAnimation.md
│   │       └── xmlui-website-blocks
│   │           ├── _meta.json
│   │           ├── _overview.md
│   │           ├── Carousel.md
│   │           ├── HelloMd.md
│   │           ├── HeroSection.md
│   │           └── ScrollToTop.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── package.json
│   ├── public
│   │   ├── feed.rss
│   │   ├── mockServiceWorker.js
│   │   ├── pages
│   │   │   ├── _meta.json
│   │   │   ├── app-structure.md
│   │   │   ├── build-editor-component.md
│   │   │   ├── build-hello-world-component.md
│   │   │   ├── components-intro.md
│   │   │   ├── context-variables.md
│   │   │   ├── forms.md
│   │   │   ├── globals.md
│   │   │   ├── glossary.md
│   │   │   ├── helper-tags.md
│   │   │   ├── hosted-deployment.md
│   │   │   ├── howto
│   │   │   │   ├── assign-a-complex-json-literal-to-a-component-variable.md
│   │   │   │   ├── chain-a-refetch.md
│   │   │   │   ├── debug-a-component.md
│   │   │   │   ├── delay-a-datasource-until-another-datasource-is-ready.md
│   │   │   │   ├── delegate-a-method.md
│   │   │   │   ├── do-custom-form-validation.md
│   │   │   │   ├── expose-a-method-from-a-component.md
│   │   │   │   ├── filter-and-transform-data-from-an-api.md
│   │   │   │   ├── group-items-in-list-by-a-property.md
│   │   │   │   ├── handle-background-operations.md
│   │   │   │   ├── hide-an-element-until-its-datasource-is-ready.md
│   │   │   │   ├── make-a-set-of-equal-width-cards.md
│   │   │   │   ├── make-a-table-responsive.md
│   │   │   │   ├── make-navpanel-width-responsive.md
│   │   │   │   ├── modify-a-value-reported-in-a-column.md
│   │   │   │   ├── paginate-a-list.md
│   │   │   │   ├── pass-data-to-a-modal-dialog.md
│   │   │   │   ├── react-to-button-click-not-keystrokes.md
│   │   │   │   ├── set-the-initial-value-of-a-select-from-fetched-data.md
│   │   │   │   ├── share-a-modaldialog-across-components.md
│   │   │   │   ├── sync-selections-between-table-and-list-views.md
│   │   │   │   ├── update-ui-optimistically.md
│   │   │   │   ├── use-built-in-form-validation.md
│   │   │   │   └── use-the-same-modaldialog-to-add-or-edit.md
│   │   │   ├── howto.md
│   │   │   ├── intro.md
│   │   │   ├── layout.md
│   │   │   ├── markup.md
│   │   │   ├── mcp.md
│   │   │   ├── modal-dialogs.md
│   │   │   ├── news-and-reviews.md
│   │   │   ├── reactive-intro.md
│   │   │   ├── refactoring.md
│   │   │   ├── routing-and-links.md
│   │   │   ├── samples
│   │   │   │   ├── color-palette.xmlui
│   │   │   │   ├── color-values.xmlui
│   │   │   │   ├── shadow-sizes.xmlui
│   │   │   │   ├── spacing-sizes.xmlui
│   │   │   │   ├── swatch.xmlui
│   │   │   │   ├── theme-gallery-brief.xmlui
│   │   │   │   └── theme-gallery.xmlui
│   │   │   ├── scoping.md
│   │   │   ├── scripting.md
│   │   │   ├── styles-and-themes
│   │   │   │   ├── common-units.md
│   │   │   │   ├── layout-props.md
│   │   │   │   ├── theme-variable-defaults.md
│   │   │   │   ├── theme-variables.md
│   │   │   │   └── themes.md
│   │   │   ├── template-properties.md
│   │   │   ├── test.md
│   │   │   ├── tutorial-01.md
│   │   │   ├── tutorial-02.md
│   │   │   ├── tutorial-03.md
│   │   │   ├── tutorial-04.md
│   │   │   ├── tutorial-05.md
│   │   │   ├── tutorial-06.md
│   │   │   ├── tutorial-07.md
│   │   │   ├── tutorial-08.md
│   │   │   ├── tutorial-09.md
│   │   │   ├── tutorial-10.md
│   │   │   ├── tutorial-11.md
│   │   │   ├── tutorial-12.md
│   │   │   ├── universal-properties.md
│   │   │   ├── user-defined-components.md
│   │   │   ├── vscode.md
│   │   │   ├── working-with-markdown.md
│   │   │   ├── working-with-text.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-charts
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── BarChart.md
│   │   │   │   ├── DonutChart.md
│   │   │   │   ├── LabelList.md
│   │   │   │   ├── Legend.md
│   │   │   │   ├── LineChart.md
│   │   │   │   └── PieChart.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   └── xmlui-spreadsheet
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       └── Spreadsheet.md
│   │   ├── resources
│   │   │   ├── devdocs
│   │   │   │   ├── debug-proxy-object-2.png
│   │   │   │   ├── debug-proxy-object.png
│   │   │   │   ├── table_editor_01.png
│   │   │   │   ├── table_editor_02.png
│   │   │   │   ├── table_editor_03.png
│   │   │   │   ├── table_editor_04.png
│   │   │   │   ├── table_editor_05.png
│   │   │   │   ├── table_editor_06.png
│   │   │   │   ├── table_editor_07.png
│   │   │   │   ├── table_editor_08.png
│   │   │   │   ├── table_editor_09.png
│   │   │   │   ├── table_editor_10.png
│   │   │   │   ├── table_editor_11.png
│   │   │   │   ├── table-editor-01.png
│   │   │   │   ├── table-editor-02.png
│   │   │   │   ├── table-editor-03.png
│   │   │   │   ├── table-editor-04.png
│   │   │   │   ├── table-editor-06.png
│   │   │   │   ├── table-editor-07.png
│   │   │   │   ├── table-editor-08.png
│   │   │   │   ├── table-editor-09.png
│   │   │   │   └── xmlui-rendering-of-tiptap-markdown.png
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   ├── clients.json
│   │   │   │   ├── daily-revenue.json
│   │   │   │   ├── dashboard-stats.json
│   │   │   │   ├── demo.xmlui
│   │   │   │   ├── demo.xmlui.xs
│   │   │   │   ├── downloads
│   │   │   │   │   └── downloads.json
│   │   │   │   ├── for-download
│   │   │   │   │   ├── index-with-api.html
│   │   │   │   │   ├── index.html
│   │   │   │   │   ├── mockApi.js
│   │   │   │   │   ├── start-darwin.sh
│   │   │   │   │   ├── start-linux.sh
│   │   │   │   │   ├── start.bat
│   │   │   │   │   └── xmlui
│   │   │   │   │       └── xmlui-standalone.umd.js
│   │   │   │   ├── getting-started
│   │   │   │   │   ├── cl-tutorial-final.zip
│   │   │   │   │   ├── cl-tutorial.zip
│   │   │   │   │   ├── cl-tutorial2.zip
│   │   │   │   │   ├── cl-tutorial3.zip
│   │   │   │   │   ├── cl-tutorial4.zip
│   │   │   │   │   ├── cl-tutorial5.zip
│   │   │   │   │   ├── cl-tutorial6.zip
│   │   │   │   │   ├── getting-started.zip
│   │   │   │   │   ├── hello-xmlui.zip
│   │   │   │   │   ├── xmlui-empty.zip
│   │   │   │   │   └── xmlui-starter.zip
│   │   │   │   ├── howto
│   │   │   │   │   └── component-icons
│   │   │   │   │       └── up-arrow.svg
│   │   │   │   ├── invoices.json
│   │   │   │   ├── monthly-status.json
│   │   │   │   ├── news-and-reviews.json
│   │   │   │   ├── products.json
│   │   │   │   ├── releases.json
│   │   │   │   ├── tutorials
│   │   │   │   │   ├── datasource
│   │   │   │   │   │   └── api.ts
│   │   │   │   │   └── p2do
│   │   │   │   │       ├── api.ts
│   │   │   │   │       └── todo-logo.svg
│   │   │   │   └── xmlui.json
│   │   │   ├── github.svg
│   │   │   ├── images
│   │   │   │   ├── apiaction-tutorial
│   │   │   │   │   ├── add-success.png
│   │   │   │   │   ├── apiaction-param.png
│   │   │   │   │   ├── change-completed.png
│   │   │   │   │   ├── change-in-progress.png
│   │   │   │   │   ├── confirm-delete.png
│   │   │   │   │   ├── data-error.png
│   │   │   │   │   ├── data-progress.png
│   │   │   │   │   ├── data-success.png
│   │   │   │   │   ├── display-1.png
│   │   │   │   │   ├── item-deleted.png
│   │   │   │   │   ├── item-updated.png
│   │   │   │   │   ├── missing-api-key.png
│   │   │   │   │   ├── new-item-added.png
│   │   │   │   │   └── test-message.png
│   │   │   │   ├── chat-api
│   │   │   │   │   └── domain-model.svg
│   │   │   │   ├── components
│   │   │   │   │   ├── image
│   │   │   │   │   │   └── breakfast.jpg
│   │   │   │   │   ├── markdown
│   │   │   │   │   │   └── colors.png
│   │   │   │   │   └── modal
│   │   │   │   │       ├── deep_link_dialog_1.jpg
│   │   │   │   │       └── deep_link_dialog_2.jpg
│   │   │   │   ├── create-apps
│   │   │   │   │   ├── collapsed-vertical.png
│   │   │   │   │   ├── using-forms-warning-dialog.png
│   │   │   │   │   └── using-forms.png
│   │   │   │   ├── datasource-tutorial
│   │   │   │   │   ├── data-with-header.png
│   │   │   │   │   ├── filtered-data.png
│   │   │   │   │   ├── filtered-items.png
│   │   │   │   │   ├── initial-page-items.png
│   │   │   │   │   ├── list-items.png
│   │   │   │   │   ├── next-page-items.png
│   │   │   │   │   ├── no-data.png
│   │   │   │   │   ├── pagination-1.jpg
│   │   │   │   │   ├── pagination-1.png
│   │   │   │   │   ├── polling-1.png
│   │   │   │   │   ├── refetch-data.png
│   │   │   │   │   ├── slow-loading.png
│   │   │   │   │   ├── test-message.png
│   │   │   │   │   ├── Thumbs.db
│   │   │   │   │   ├── unconventional-data.png
│   │   │   │   │   └── unfiltered-items.png
│   │   │   │   ├── flower.jpg
│   │   │   │   ├── get-started
│   │   │   │   │   ├── add-new-contact.png
│   │   │   │   │   ├── app-modified.png
│   │   │   │   │   ├── app-start.png
│   │   │   │   │   ├── app-with-boxes.png
│   │   │   │   │   ├── app-with-toast.png
│   │   │   │   │   ├── boilerplate-structure.png
│   │   │   │   │   ├── cl-initial.png
│   │   │   │   │   ├── cl-start.png
│   │   │   │   │   ├── contact-counts.png
│   │   │   │   │   ├── contact-dialog-title.png
│   │   │   │   │   ├── contact-dialog.png
│   │   │   │   │   ├── contact-menus.png
│   │   │   │   │   ├── contact-predicates.png
│   │   │   │   │   ├── context-menu.png
│   │   │   │   │   ├── dashboard-numbers.png
│   │   │   │   │   ├── default-contact-list.png
│   │   │   │   │   ├── delete-contact.png
│   │   │   │   │   ├── delete-task.png
│   │   │   │   │   ├── detailed-template.png
│   │   │   │   │   ├── edit-contact-details.png
│   │   │   │   │   ├── edited-contact-saved.png
│   │   │   │   │   ├── empty-sections.png
│   │   │   │   │   ├── filter-completed.png
│   │   │   │   │   ├── fullwidth-desktop.png
│   │   │   │   │   ├── fullwidth-mobile.png
│   │   │   │   │   ├── initial-table.png
│   │   │   │   │   ├── items-and-badges.png
│   │   │   │   │   ├── loading-message.png
│   │   │   │   │   ├── new-contact-button.png
│   │   │   │   │   ├── new-contact-saved.png
│   │   │   │   │   ├── no-empty-sections.png
│   │   │   │   │   ├── personal-todo-initial.png
│   │   │   │   │   ├── piechart.png
│   │   │   │   │   ├── review-today.png
│   │   │   │   │   ├── rudimentary-dashboard.png
│   │   │   │   │   ├── section-collapsed.png
│   │   │   │   │   ├── sectioned-items.png
│   │   │   │   │   ├── sections-ordered.png
│   │   │   │   │   ├── spacex-list-with-links.png
│   │   │   │   │   ├── spacex-list.png
│   │   │   │   │   ├── start-personal-todo-1.png
│   │   │   │   │   ├── submit-new-contact.png
│   │   │   │   │   ├── submit-new-task.png
│   │   │   │   │   ├── syntax-highlighting.png
│   │   │   │   │   ├── table-with-badge.png
│   │   │   │   │   ├── template-with-card.png
│   │   │   │   │   ├── test-emulated-api.png
│   │   │   │   │   ├── Thumbs.db
│   │   │   │   │   ├── todo-logo.png
│   │   │   │   │   └── xmlui-tools.png
│   │   │   │   ├── HelloApp.png
│   │   │   │   ├── HelloApp2.png
│   │   │   │   ├── logos
│   │   │   │   │   ├── xmlui1.svg
│   │   │   │   │   ├── xmlui2.svg
│   │   │   │   │   ├── xmlui3.svg
│   │   │   │   │   ├── xmlui4.svg
│   │   │   │   │   ├── xmlui5.svg
│   │   │   │   │   ├── xmlui6.svg
│   │   │   │   │   └── xmlui7.svg
│   │   │   │   ├── pdf
│   │   │   │   │   └── dummy-pdf.jpg
│   │   │   │   ├── rendering-engine
│   │   │   │   │   ├── AppEngine-flow.svg
│   │   │   │   │   ├── Component.svg
│   │   │   │   │   ├── CompoundComponent.svg
│   │   │   │   │   ├── RootComponent.svg
│   │   │   │   │   └── tree-with-containers.svg
│   │   │   │   ├── reviewers-guide
│   │   │   │   │   ├── AppEngine-flow.svg
│   │   │   │   │   └── incbutton-in-action.png
│   │   │   │   ├── tools
│   │   │   │   │   └── boilerplate-structure.png
│   │   │   │   ├── try.svg
│   │   │   │   ├── tutorial
│   │   │   │   │   ├── app-chat-history.png
│   │   │   │   │   ├── app-content-placeholder.png
│   │   │   │   │   ├── app-header-and-content.png
│   │   │   │   │   ├── app-links-channel-selected.png
│   │   │   │   │   ├── app-links-click.png
│   │   │   │   │   ├── app-navigation.png
│   │   │   │   │   ├── finished-ex01.png
│   │   │   │   │   ├── finished-ex02.png
│   │   │   │   │   ├── hello.png
│   │   │   │   │   ├── splash-screen-advanced.png
│   │   │   │   │   ├── splash-screen-after-click.png
│   │   │   │   │   ├── splash-screen-centered.png
│   │   │   │   │   ├── splash-screen-events.png
│   │   │   │   │   ├── splash-screen-expression.png
│   │   │   │   │   ├── splash-screen-reuse-after.png
│   │   │   │   │   ├── splash-screen-reuse-before.png
│   │   │   │   │   └── splash-screen.png
│   │   │   │   └── tutorial-01.png
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   ├── Boxes.xmlui
│   │   │   ├── Breadcrumb.xmlui
│   │   │   ├── ChangeLog.xmlui
│   │   │   ├── ColorPalette.xmlui
│   │   │   ├── DocumentLinks.xmlui
│   │   │   ├── DocumentPage.xmlui
│   │   │   ├── DocumentPageNoTOC.xmlui
│   │   │   ├── Icons.xmlui
│   │   │   ├── IncButton.xmlui
│   │   │   ├── IncButton2.xmlui
│   │   │   ├── NameValue.xmlui
│   │   │   ├── PageNotFound.xmlui
│   │   │   ├── PaletteItem.xmlui
│   │   │   ├── Palettes.xmlui
│   │   │   ├── SectionHeader.xmlui
│   │   │   ├── TBD.xmlui
│   │   │   ├── Test.xmlui
│   │   │   ├── ThemesIntro.xmlui
│   │   │   ├── ThousandThemes.xmlui
│   │   │   ├── TubeStops.xmlui
│   │   │   ├── TubeStops.xmlui.xs
│   │   │   └── TwoColumnCode.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       ├── docs-theme.ts
│   │       ├── earthtone.ts
│   │       ├── xmlui-gray-on-default.ts
│   │       ├── xmlui-green-on-default.ts
│   │       └── xmlui-orange-on-default.ts
│   └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│   ├── xmlui-animations
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── Animation.tsx
│   │   │   ├── AnimationNative.tsx
│   │   │   ├── FadeAnimation.tsx
│   │   │   ├── FadeInAnimation.tsx
│   │   │   ├── FadeOutAnimation.tsx
│   │   │   ├── index.tsx
│   │   │   ├── ScaleAnimation.tsx
│   │   │   └── SlideInAnimation.tsx
│   │   └── tsconfig.json
│   ├── xmlui-devtools
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── devtools
│   │   │   │   ├── DevTools.tsx
│   │   │   │   ├── DevToolsNative.module.scss
│   │   │   │   ├── DevToolsNative.tsx
│   │   │   │   ├── ModalDialog.module.scss
│   │   │   │   ├── ModalDialog.tsx
│   │   │   │   ├── ModalVisibilityContext.tsx
│   │   │   │   ├── Tooltip.module.scss
│   │   │   │   ├── Tooltip.tsx
│   │   │   │   └── utils.ts
│   │   │   ├── editor
│   │   │   │   └── Editor.tsx
│   │   │   └── index.tsx
│   │   ├── tsconfig.json
│   │   └── vite.config-overrides.ts
│   ├── xmlui-hello-world
│   │   ├── .gitignore
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── HelloWorld.module.scss
│   │   │   ├── HelloWorld.tsx
│   │   │   ├── HelloWorldNative.tsx
│   │   │   └── index.tsx
│   │   └── tsconfig.json
│   ├── xmlui-os-frames
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.tsx
│   │   │   ├── IPhoneFrame.module.scss
│   │   │   ├── IPhoneFrame.tsx
│   │   │   ├── MacOSAppFrame.module.scss
│   │   │   ├── MacOSAppFrame.tsx
│   │   │   ├── WindowsAppFrame.module.scss
│   │   │   └── WindowsAppFrame.tsx
│   │   └── tsconfig.json
│   ├── xmlui-pdf
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   ├── components
│   │   │   │   └── Pdf.xmlui
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.tsx
│   │   │   ├── LazyPdfNative.tsx
│   │   │   ├── Pdf.module.scss
│   │   │   └── Pdf.tsx
│   │   └── tsconfig.json
│   ├── xmlui-playground
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── hooks
│   │   │   │   ├── usePlayground.ts
│   │   │   │   └── useToast.ts
│   │   │   ├── index.tsx
│   │   │   ├── playground
│   │   │   │   ├── Box.module.scss
│   │   │   │   ├── Box.tsx
│   │   │   │   ├── CodeSelector.tsx
│   │   │   │   ├── ConfirmationDialog.module.scss
│   │   │   │   ├── ConfirmationDialog.tsx
│   │   │   │   ├── Editor.tsx
│   │   │   │   ├── Header.module.scss
│   │   │   │   ├── Header.tsx
│   │   │   │   ├── Playground.tsx
│   │   │   │   ├── PlaygroundContent.module.scss
│   │   │   │   ├── PlaygroundContent.tsx
│   │   │   │   ├── PlaygroundNative.module.scss
│   │   │   │   ├── PlaygroundNative.tsx
│   │   │   │   ├── Preview.module.scss
│   │   │   │   ├── Preview.tsx
│   │   │   │   ├── Select.module.scss
│   │   │   │   ├── StandalonePlayground.tsx
│   │   │   │   ├── StandalonePlaygroundNative.module.scss
│   │   │   │   ├── StandalonePlaygroundNative.tsx
│   │   │   │   ├── ThemeSwitcher.module.scss
│   │   │   │   ├── ThemeSwitcher.tsx
│   │   │   │   ├── ToneSwitcher.tsx
│   │   │   │   ├── Tooltip.module.scss
│   │   │   │   ├── Tooltip.tsx
│   │   │   │   └── utils.ts
│   │   │   ├── providers
│   │   │   │   ├── Toast.module.scss
│   │   │   │   └── ToastProvider.tsx
│   │   │   ├── state
│   │   │   │   └── store.ts
│   │   │   ├── themes
│   │   │   │   └── theme.ts
│   │   │   └── utils
│   │   │       └── helpers.ts
│   │   └── tsconfig.json
│   ├── xmlui-search
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.tsx
│   │   │   ├── Search.module.scss
│   │   │   └── Search.tsx
│   │   └── tsconfig.json
│   ├── xmlui-spreadsheet
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.tsx
│   │   │   ├── Spreadsheet.tsx
│   │   │   └── SpreadsheetNative.tsx
│   │   └── tsconfig.json
│   └── xmlui-website-blocks
│       ├── .gitignore
│       ├── CHANGELOG.md
│       ├── demo
│       │   ├── components
│       │   │   ├── HeroBackgroundBreakoutPage.xmlui
│       │   │   ├── HeroBackgroundsPage.xmlui
│       │   │   ├── HeroContentsPage.xmlui
│       │   │   ├── HeroTextAlignPage.xmlui
│       │   │   ├── HeroTextPage.xmlui
│       │   │   └── HeroTonesPage.xmlui
│       │   ├── Main.xmlui
│       │   └── themes
│       │       └── default.ts
│       ├── index.html
│       ├── index.ts
│       ├── meta
│       │   └── componentsMetadata.ts
│       ├── package.json
│       ├── public
│       │   └── resources
│       │       ├── building.jpg
│       │       └── xmlui-logo.svg
│       ├── src
│       │   ├── Carousel
│       │   │   ├── Carousel.module.scss
│       │   │   ├── Carousel.tsx
│       │   │   ├── CarouselContext.tsx
│       │   │   └── CarouselNative.tsx
│       │   ├── FancyButton
│       │   │   ├── FancyButton.module.scss
│       │   │   ├── FancyButton.tsx
│       │   │   └── FancyButton.xmlui
│       │   ├── Hello
│       │   │   ├── Hello.tsx
│       │   │   ├── Hello.xmlui
│       │   │   └── Hello.xmlui.xs
│       │   ├── HeroSection
│       │   │   ├── HeroSection.module.scss
│       │   │   ├── HeroSection.tsx
│       │   │   └── HeroSectionNative.tsx
│       │   ├── index.tsx
│       │   ├── ScrollToTop
│       │   │   ├── ScrollToTop.module.scss
│       │   │   ├── ScrollToTop.tsx
│       │   │   └── ScrollToTopNative.tsx
│       │   └── vite-env.d.ts
│       └── tsconfig.json
├── README.md
├── tools
│   ├── codefence
│   │   └── xmlui-code-fence-docs.md
│   ├── create-app
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── create-app.ts
│   │   ├── helpers
│   │   │   ├── copy.ts
│   │   │   ├── get-pkg-manager.ts
│   │   │   ├── git.ts
│   │   │   ├── install.ts
│   │   │   ├── is-folder-empty.ts
│   │   │   ├── is-writeable.ts
│   │   │   ├── make-dir.ts
│   │   │   └── validate-pkg.ts
│   │   ├── index.ts
│   │   ├── package.json
│   │   ├── templates
│   │   │   ├── default
│   │   │   │   └── ts
│   │   │   │       ├── gitignore
│   │   │   │       ├── index.html
│   │   │   │       ├── index.ts
│   │   │   │       ├── public
│   │   │   │       │   ├── mockServiceWorker.js
│   │   │   │       │   ├── resources
│   │   │   │       │   │   ├── favicon.ico
│   │   │   │       │   │   └── xmlui-logo.svg
│   │   │   │       │   └── serve.json
│   │   │   │       └── src
│   │   │   │           ├── components
│   │   │   │           │   ├── ApiAware.xmlui
│   │   │   │           │   ├── Home.xmlui
│   │   │   │           │   ├── IncButton.xmlui
│   │   │   │           │   └── PagePanel.xmlui
│   │   │   │           ├── config.ts
│   │   │   │           └── Main.xmlui
│   │   │   ├── index.ts
│   │   │   └── types.ts
│   │   └── tsconfig.json
│   ├── create-xmlui-hello-world
│   │   ├── index.js
│   │   └── package.json
│   └── vscode
│       ├── .gitignore
│       ├── .vscode
│       │   ├── launch.json
│       │   └── tasks.json
│       ├── .vscodeignore
│       ├── build.sh
│       ├── CHANGELOG.md
│       ├── esbuild.js
│       ├── eslint.config.mjs
│       ├── formatter-docs.md
│       ├── generate-test-sample.sh
│       ├── LICENSE.md
│       ├── package-lock.json
│       ├── package.json
│       ├── README.md
│       ├── resources
│       │   ├── xmlui-logo.png
│       │   └── xmlui-markup-syntax-highlighting.png
│       ├── src
│       │   ├── extension.ts
│       │   └── server.ts
│       ├── syntaxes
│       │   └── xmlui.tmLanguage.json
│       ├── test-samples
│       │   └── sample.xmlui
│       ├── tsconfig.json
│       └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
    ├── .gitignore
    ├── bin
    │   ├── bootstrap.js
    │   ├── build-lib.ts
    │   ├── build.ts
    │   ├── index.ts
    │   ├── preview.ts
    │   ├── start.ts
    │   ├── vite-xmlui-plugin.ts
    │   └── viteConfig.ts
    ├── CHANGELOG.md
    ├── conventions
    │   ├── component-qa-checklist.md
    │   ├── copilot-conventions.md
    │   ├── create-xmlui-components.md
    │   ├── mermaid.md
    │   ├── testing-conventions.md
    │   └── xmlui-in-a-nutshell.md
    ├── dev-docs
    │   ├── accessibility.md
    │   ├── build-system.md
    │   ├── build-xmlui.md
    │   ├── component-behaviors.md
    │   ├── components-with-options.md
    │   ├── containers.md
    │   ├── data-operations.md
    │   ├── glossary.md
    │   ├── index.md
    │   ├── next
    │   │   ├── component-dev-guide.md
    │   │   ├── configuration-management-enhancement-summary.md
    │   │   ├── documentation-scripts-refactoring-complete-summary.md
    │   │   ├── documentation-scripts-refactoring-plan.md
    │   │   ├── duplicate-pattern-extraction-summary.md
    │   │   ├── error-handling-standardization-summary.md
    │   │   ├── generating-component-reference.md
    │   │   ├── index.md
    │   │   ├── logging-consistency-implementation-summary.md
    │   │   ├── project-build.md
    │   │   ├── project-structure.md
    │   │   ├── theme-context.md
    │   │   ├── tiptap-design-considerations.md
    │   │   ├── working-with-code.md
    │   │   ├── xmlui-runtime-architecture
    │   │   └── xmlui-wcag-accessibility-report.md
    │   ├── react-fundamentals.md
    │   ├── release-method.md
    │   ├── standalone-app.md
    │   ├── ud-components.md
    │   └── xmlui-repo.md
    ├── package.json
    ├── playwright.config.ts
    ├── scripts
    │   ├── coverage-only.js
    │   ├── e2e-test-summary.js
    │   ├── generate-docs
    │   │   ├── build-downloads-map.mjs
    │   │   ├── build-pages-map.mjs
    │   │   ├── components-config.json
    │   │   ├── configuration-management.mjs
    │   │   ├── constants.mjs
    │   │   ├── create-theme-files.mjs
    │   │   ├── DocsGenerator.mjs
    │   │   ├── error-handling.mjs
    │   │   ├── extensions-config.json
    │   │   ├── folders.mjs
    │   │   ├── generate-summary-files.mjs
    │   │   ├── get-docs.mjs
    │   │   ├── input-handler.mjs
    │   │   ├── logger.mjs
    │   │   ├── logging-standards.mjs
    │   │   ├── MetadataProcessor.mjs
    │   │   ├── pattern-utilities.mjs
    │   │   └── utils.mjs
    │   ├── get-langserver-metadata.mjs
    │   ├── inline-links.mjs
    │   └── README-e2e-summary.md
    ├── src
    │   ├── abstractions
    │   │   ├── _conventions.md
    │   │   ├── ActionDefs.ts
    │   │   ├── AppContextDefs.ts
    │   │   ├── ComponentDefs.ts
    │   │   ├── ContainerDefs.ts
    │   │   ├── ExtensionDefs.ts
    │   │   ├── FunctionDefs.ts
    │   │   ├── RendererDefs.ts
    │   │   ├── scripting
    │   │   │   ├── BlockScope.ts
    │   │   │   ├── Compilation.ts
    │   │   │   ├── LogicalThread.ts
    │   │   │   ├── LoopScope.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── ScriptParserError.ts
    │   │   │   ├── Token.ts
    │   │   │   ├── TryScope.ts
    │   │   │   └── TryScopeExp.ts
    │   │   └── ThemingDefs.ts
    │   ├── components
    │   │   ├── _conventions.md
    │   │   ├── abstractions.ts
    │   │   ├── Accordion
    │   │   │   ├── Accordion.md
    │   │   │   ├── Accordion.module.scss
    │   │   │   ├── Accordion.spec.ts
    │   │   │   ├── Accordion.tsx
    │   │   │   ├── AccordionContext.tsx
    │   │   │   ├── AccordionItem.tsx
    │   │   │   ├── AccordionItemNative.tsx
    │   │   │   └── AccordionNative.tsx
    │   │   ├── Animation
    │   │   │   └── AnimationNative.tsx
    │   │   ├── APICall
    │   │   │   ├── APICall.md
    │   │   │   ├── APICall.spec.ts
    │   │   │   ├── APICall.tsx
    │   │   │   └── APICallNative.tsx
    │   │   ├── App
    │   │   │   ├── App.md
    │   │   │   ├── App.module.scss
    │   │   │   ├── App.spec.ts
    │   │   │   ├── App.tsx
    │   │   │   ├── AppLayoutContext.ts
    │   │   │   ├── AppNative.tsx
    │   │   │   ├── AppStateContext.ts
    │   │   │   ├── doc-resources
    │   │   │   │   ├── condensed-sticky.xmlui
    │   │   │   │   ├── condensed.xmlui
    │   │   │   │   ├── horizontal-sticky.xmlui
    │   │   │   │   ├── horizontal.xmlui
    │   │   │   │   ├── vertical-full-header.xmlui
    │   │   │   │   ├── vertical-sticky.xmlui
    │   │   │   │   └── vertical.xmlui
    │   │   │   ├── IndexerContext.ts
    │   │   │   ├── LinkInfoContext.ts
    │   │   │   ├── SearchContext.tsx
    │   │   │   ├── Sheet.module.scss
    │   │   │   └── Sheet.tsx
    │   │   ├── AppHeader
    │   │   │   ├── AppHeader.md
    │   │   │   ├── AppHeader.module.scss
    │   │   │   ├── AppHeader.spec.ts
    │   │   │   ├── AppHeader.tsx
    │   │   │   └── AppHeaderNative.tsx
    │   │   ├── AppState
    │   │   │   ├── AppState.md
    │   │   │   ├── AppState.spec.ts
    │   │   │   ├── AppState.tsx
    │   │   │   └── AppStateNative.tsx
    │   │   ├── AutoComplete
    │   │   │   ├── AutoComplete.md
    │   │   │   ├── AutoComplete.module.scss
    │   │   │   ├── AutoComplete.spec.ts
    │   │   │   ├── AutoComplete.tsx
    │   │   │   ├── AutoCompleteContext.tsx
    │   │   │   └── AutoCompleteNative.tsx
    │   │   ├── Avatar
    │   │   │   ├── Avatar.md
    │   │   │   ├── Avatar.module.scss
    │   │   │   ├── Avatar.spec.ts
    │   │   │   ├── Avatar.tsx
    │   │   │   └── AvatarNative.tsx
    │   │   ├── Backdrop
    │   │   │   ├── Backdrop.md
    │   │   │   ├── Backdrop.module.scss
    │   │   │   ├── Backdrop.spec.ts
    │   │   │   ├── Backdrop.tsx
    │   │   │   └── BackdropNative.tsx
    │   │   ├── Badge
    │   │   │   ├── Badge.md
    │   │   │   ├── Badge.module.scss
    │   │   │   ├── Badge.spec.ts
    │   │   │   ├── Badge.tsx
    │   │   │   └── BadgeNative.tsx
    │   │   ├── Bookmark
    │   │   │   ├── Bookmark.md
    │   │   │   ├── Bookmark.module.scss
    │   │   │   ├── Bookmark.spec.ts
    │   │   │   ├── Bookmark.tsx
    │   │   │   └── BookmarkNative.tsx
    │   │   ├── Breakout
    │   │   │   ├── Breakout.module.scss
    │   │   │   ├── Breakout.spec.ts
    │   │   │   ├── Breakout.tsx
    │   │   │   └── BreakoutNative.tsx
    │   │   ├── Button
    │   │   │   ├── Button-style.spec.ts
    │   │   │   ├── Button.md
    │   │   │   ├── Button.module.scss
    │   │   │   ├── Button.spec.ts
    │   │   │   ├── Button.tsx
    │   │   │   └── ButtonNative.tsx
    │   │   ├── Card
    │   │   │   ├── Card.md
    │   │   │   ├── Card.module.scss
    │   │   │   ├── Card.spec.ts
    │   │   │   ├── Card.tsx
    │   │   │   └── CardNative.tsx
    │   │   ├── Carousel
    │   │   │   ├── Carousel.md
    │   │   │   ├── Carousel.module.scss
    │   │   │   ├── Carousel.spec.ts
    │   │   │   ├── Carousel.tsx
    │   │   │   ├── CarouselContext.tsx
    │   │   │   ├── CarouselItem.tsx
    │   │   │   ├── CarouselItemNative.tsx
    │   │   │   └── CarouselNative.tsx
    │   │   ├── ChangeListener
    │   │   │   ├── ChangeListener.md
    │   │   │   ├── ChangeListener.spec.ts
    │   │   │   ├── ChangeListener.tsx
    │   │   │   └── ChangeListenerNative.tsx
    │   │   ├── chart-color-schemes.ts
    │   │   ├── Charts
    │   │   │   ├── AreaChart
    │   │   │   │   ├── AreaChart.md
    │   │   │   │   ├── AreaChart.spec.ts
    │   │   │   │   ├── AreaChart.tsx
    │   │   │   │   └── AreaChartNative.tsx
    │   │   │   ├── BarChart
    │   │   │   │   ├── BarChart.md
    │   │   │   │   ├── BarChart.module.scss
    │   │   │   │   ├── BarChart.spec.ts
    │   │   │   │   ├── BarChart.tsx
    │   │   │   │   └── BarChartNative.tsx
    │   │   │   ├── DonutChart
    │   │   │   │   ├── DonutChart.spec.ts
    │   │   │   │   └── DonutChart.tsx
    │   │   │   ├── LabelList
    │   │   │   │   ├── LabelList.spec.ts
    │   │   │   │   ├── LabelList.tsx
    │   │   │   │   ├── LabelListNative.module.scss
    │   │   │   │   └── LabelListNative.tsx
    │   │   │   ├── Legend
    │   │   │   │   ├── Legend.spec.ts
    │   │   │   │   ├── Legend.tsx
    │   │   │   │   └── LegendNative.tsx
    │   │   │   ├── LineChart
    │   │   │   │   ├── LineChart.md
    │   │   │   │   ├── LineChart.module.scss
    │   │   │   │   ├── LineChart.spec.ts
    │   │   │   │   ├── LineChart.tsx
    │   │   │   │   └── LineChartNative.tsx
    │   │   │   ├── PieChart
    │   │   │   │   ├── PieChart.md
    │   │   │   │   ├── PieChart.spec.ts
    │   │   │   │   ├── PieChart.tsx
    │   │   │   │   ├── PieChartNative.module.scss
    │   │   │   │   └── PieChartNative.tsx
    │   │   │   ├── RadarChart
    │   │   │   │   ├── RadarChart.md
    │   │   │   │   ├── RadarChart.spec.ts
    │   │   │   │   ├── RadarChart.tsx
    │   │   │   │   └── RadarChartNative.tsx
    │   │   │   ├── Tooltip
    │   │   │   │   ├── TooltipContent.module.scss
    │   │   │   │   ├── TooltipContent.spec.ts
    │   │   │   │   └── TooltipContent.tsx
    │   │   │   └── utils
    │   │   │       ├── abstractions.ts
    │   │   │       └── ChartProvider.tsx
    │   │   ├── Checkbox
    │   │   │   ├── Checkbox.md
    │   │   │   ├── Checkbox.spec.ts
    │   │   │   └── Checkbox.tsx
    │   │   ├── CodeBlock
    │   │   │   ├── CodeBlock.module.scss
    │   │   │   ├── CodeBlock.spec.ts
    │   │   │   ├── CodeBlock.tsx
    │   │   │   ├── CodeBlockNative.tsx
    │   │   │   └── highlight-code.ts
    │   │   ├── collectedComponentMetadata.ts
    │   │   ├── ColorPicker
    │   │   │   ├── ColorPicker.md
    │   │   │   ├── ColorPicker.module.scss
    │   │   │   ├── ColorPicker.spec.ts
    │   │   │   ├── ColorPicker.tsx
    │   │   │   └── ColorPickerNative.tsx
    │   │   ├── Column
    │   │   │   ├── Column.md
    │   │   │   ├── Column.tsx
    │   │   │   ├── ColumnNative.tsx
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   └── TableContext.tsx
    │   │   ├── component-utils.ts
    │   │   ├── ComponentProvider.tsx
    │   │   ├── ComponentRegistryContext.tsx
    │   │   ├── container-helpers.tsx
    │   │   ├── ContentSeparator
    │   │   │   ├── ContentSeparator.md
    │   │   │   ├── ContentSeparator.module.scss
    │   │   │   ├── ContentSeparator.spec.ts
    │   │   │   ├── ContentSeparator.tsx
    │   │   │   └── ContentSeparatorNative.tsx
    │   │   ├── DataSource
    │   │   │   ├── DataSource.md
    │   │   │   └── DataSource.tsx
    │   │   ├── DateInput
    │   │   │   ├── DateInput.md
    │   │   │   ├── DateInput.module.scss
    │   │   │   ├── DateInput.spec.ts
    │   │   │   ├── DateInput.tsx
    │   │   │   └── DateInputNative.tsx
    │   │   ├── DatePicker
    │   │   │   ├── DatePicker.md
    │   │   │   ├── DatePicker.module.scss
    │   │   │   ├── DatePicker.spec.ts
    │   │   │   ├── DatePicker.tsx
    │   │   │   └── DatePickerNative.tsx
    │   │   ├── DropdownMenu
    │   │   │   ├── DropdownMenu.md
    │   │   │   ├── DropdownMenu.module.scss
    │   │   │   ├── DropdownMenu.spec.ts
    │   │   │   ├── DropdownMenu.tsx
    │   │   │   ├── DropdownMenuNative.tsx
    │   │   │   ├── MenuItem.md
    │   │   │   └── SubMenuItem.md
    │   │   ├── EmojiSelector
    │   │   │   ├── EmojiSelector.md
    │   │   │   ├── EmojiSelector.spec.ts
    │   │   │   ├── EmojiSelector.tsx
    │   │   │   └── EmojiSelectorNative.tsx
    │   │   ├── ExpandableItem
    │   │   │   ├── ExpandableItem.module.scss
    │   │   │   ├── ExpandableItem.spec.ts
    │   │   │   ├── ExpandableItem.tsx
    │   │   │   └── ExpandableItemNative.tsx
    │   │   ├── FileInput
    │   │   │   ├── FileInput.md
    │   │   │   ├── FileInput.module.scss
    │   │   │   ├── FileInput.spec.ts
    │   │   │   ├── FileInput.tsx
    │   │   │   └── FileInputNative.tsx
    │   │   ├── FileUploadDropZone
    │   │   │   ├── FileUploadDropZone.md
    │   │   │   ├── FileUploadDropZone.module.scss
    │   │   │   ├── FileUploadDropZone.spec.ts
    │   │   │   ├── FileUploadDropZone.tsx
    │   │   │   └── FileUploadDropZoneNative.tsx
    │   │   ├── FlowLayout
    │   │   │   ├── FlowLayout.md
    │   │   │   ├── FlowLayout.module.scss
    │   │   │   ├── FlowLayout.spec.ts
    │   │   │   ├── FlowLayout.spec.ts-snapshots
    │   │   │   │   └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
    │   │   │   ├── FlowLayout.tsx
    │   │   │   └── FlowLayoutNative.tsx
    │   │   ├── Footer
    │   │   │   ├── Footer.md
    │   │   │   ├── Footer.module.scss
    │   │   │   ├── Footer.spec.ts
    │   │   │   ├── Footer.tsx
    │   │   │   └── FooterNative.tsx
    │   │   ├── Form
    │   │   │   ├── Form.md
    │   │   │   ├── Form.module.scss
    │   │   │   ├── Form.spec.ts
    │   │   │   ├── Form.tsx
    │   │   │   ├── formActions.ts
    │   │   │   ├── FormContext.ts
    │   │   │   └── FormNative.tsx
    │   │   ├── FormItem
    │   │   │   ├── FormItem.md
    │   │   │   ├── FormItem.module.scss
    │   │   │   ├── FormItem.spec.ts
    │   │   │   ├── FormItem.tsx
    │   │   │   ├── FormItemNative.tsx
    │   │   │   ├── HelperText.module.scss
    │   │   │   ├── HelperText.tsx
    │   │   │   ├── ItemWithLabel.tsx
    │   │   │   └── Validations.ts
    │   │   ├── FormSection
    │   │   │   ├── FormSection.md
    │   │   │   ├── FormSection.ts
    │   │   │   └── FormSection.xmlui
    │   │   ├── Fragment
    │   │   │   ├── Fragment.spec.ts
    │   │   │   └── Fragment.tsx
    │   │   ├── Heading
    │   │   │   ├── abstractions.ts
    │   │   │   ├── H1.md
    │   │   │   ├── H1.spec.ts
    │   │   │   ├── H2.md
    │   │   │   ├── H2.spec.ts
    │   │   │   ├── H3.md
    │   │   │   ├── H3.spec.ts
    │   │   │   ├── H4.md
    │   │   │   ├── H4.spec.ts
    │   │   │   ├── H5.md
    │   │   │   ├── H5.spec.ts
    │   │   │   ├── H6.md
    │   │   │   ├── H6.spec.ts
    │   │   │   ├── Heading.md
    │   │   │   ├── Heading.module.scss
    │   │   │   ├── Heading.spec.ts
    │   │   │   ├── Heading.tsx
    │   │   │   └── HeadingNative.tsx
    │   │   ├── HoverCard
    │   │   │   ├── HoverCard.tsx
    │   │   │   └── HovercardNative.tsx
    │   │   ├── HtmlTags
    │   │   │   ├── HtmlTags.module.scss
    │   │   │   ├── HtmlTags.spec.ts
    │   │   │   └── HtmlTags.tsx
    │   │   ├── Icon
    │   │   │   ├── AdmonitionDanger.tsx
    │   │   │   ├── AdmonitionInfo.tsx
    │   │   │   ├── AdmonitionNote.tsx
    │   │   │   ├── AdmonitionTip.tsx
    │   │   │   ├── AdmonitionWarning.tsx
    │   │   │   ├── ApiIcon.tsx
    │   │   │   ├── ArrowDropDown.module.scss
    │   │   │   ├── ArrowDropDown.tsx
    │   │   │   ├── ArrowDropUp.module.scss
    │   │   │   ├── ArrowDropUp.tsx
    │   │   │   ├── ArrowLeft.module.scss
    │   │   │   ├── ArrowLeft.tsx
    │   │   │   ├── ArrowRight.module.scss
    │   │   │   ├── ArrowRight.tsx
    │   │   │   ├── Attach.tsx
    │   │   │   ├── Binding.module.scss
    │   │   │   ├── Binding.tsx
    │   │   │   ├── BoardIcon.tsx
    │   │   │   ├── BoxIcon.tsx
    │   │   │   ├── CheckIcon.tsx
    │   │   │   ├── ChevronDownIcon.tsx
    │   │   │   ├── ChevronLeft.tsx
    │   │   │   ├── ChevronRight.tsx
    │   │   │   ├── ChevronUpIcon.tsx
    │   │   │   ├── CodeFileIcon.tsx
    │   │   │   ├── CodeSandbox.tsx
    │   │   │   ├── CompactListIcon.tsx
    │   │   │   ├── ContentCopyIcon.tsx
    │   │   │   ├── DarkToLightIcon.tsx
    │   │   │   ├── DatabaseIcon.module.scss
    │   │   │   ├── DatabaseIcon.tsx
    │   │   │   ├── DocFileIcon.tsx
    │   │   │   ├── DocIcon.tsx
    │   │   │   ├── DotMenuHorizontalIcon.tsx
    │   │   │   ├── DotMenuIcon.tsx
    │   │   │   ├── EmailIcon.tsx
    │   │   │   ├── EmptyFolderIcon.tsx
    │   │   │   ├── ErrorIcon.tsx
    │   │   │   ├── ExpressionIcon.tsx
    │   │   │   ├── FillPlusCricleIcon.tsx
    │   │   │   ├── FilterIcon.tsx
    │   │   │   ├── FolderIcon.tsx
    │   │   │   ├── GlobeIcon.tsx
    │   │   │   ├── HomeIcon.tsx
    │   │   │   ├── HyperLinkIcon.tsx
    │   │   │   ├── Icon.md
    │   │   │   ├── Icon.module.scss
    │   │   │   ├── Icon.spec.ts
    │   │   │   ├── Icon.tsx
    │   │   │   ├── IconNative.tsx
    │   │   │   ├── ImageFileIcon.tsx
    │   │   │   ├── Inspect.tsx
    │   │   │   ├── LightToDark.tsx
    │   │   │   ├── LinkIcon.tsx
    │   │   │   ├── ListIcon.tsx
    │   │   │   ├── LooseListIcon.tsx
    │   │   │   ├── MoonIcon.tsx
    │   │   │   ├── MoreOptionsIcon.tsx
    │   │   │   ├── NoSortIcon.tsx
    │   │   │   ├── PDFIcon.tsx
    │   │   │   ├── PenIcon.tsx
    │   │   │   ├── PhoneIcon.tsx
    │   │   │   ├── PhotoIcon.tsx
    │   │   │   ├── PlusIcon.tsx
    │   │   │   ├── SearchIcon.tsx
    │   │   │   ├── ShareIcon.tsx
    │   │   │   ├── SortAscendingIcon.tsx
    │   │   │   ├── SortDescendingIcon.tsx
    │   │   │   ├── StarsIcon.tsx
    │   │   │   ├── SunIcon.tsx
    │   │   │   ├── svg
    │   │   │   │   ├── admonition_danger.svg
    │   │   │   │   ├── admonition_info.svg
    │   │   │   │   ├── admonition_note.svg
    │   │   │   │   ├── admonition_tip.svg
    │   │   │   │   ├── admonition_warning.svg
    │   │   │   │   ├── api.svg
    │   │   │   │   ├── arrow-dropdown.svg
    │   │   │   │   ├── arrow-left.svg
    │   │   │   │   ├── arrow-right.svg
    │   │   │   │   ├── arrow-up.svg
    │   │   │   │   ├── attach.svg
    │   │   │   │   ├── binding.svg
    │   │   │   │   ├── box.svg
    │   │   │   │   ├── bulb.svg
    │   │   │   │   ├── code-file.svg
    │   │   │   │   ├── code-sandbox.svg
    │   │   │   │   ├── dark_to_light.svg
    │   │   │   │   ├── database.svg
    │   │   │   │   ├── doc.svg
    │   │   │   │   ├── empty-folder.svg
    │   │   │   │   ├── expression.svg
    │   │   │   │   ├── eye-closed.svg
    │   │   │   │   ├── eye-dark.svg
    │   │   │   │   ├── eye.svg
    │   │   │   │   ├── file-text.svg
    │   │   │   │   ├── filter.svg
    │   │   │   │   ├── folder.svg
    │   │   │   │   ├── img.svg
    │   │   │   │   ├── inspect.svg
    │   │   │   │   ├── light_to_dark.svg
    │   │   │   │   ├── moon.svg
    │   │   │   │   ├── pdf.svg
    │   │   │   │   ├── photo.svg
    │   │   │   │   ├── share.svg
    │   │   │   │   ├── stars.svg
    │   │   │   │   ├── sun.svg
    │   │   │   │   ├── trending-down.svg
    │   │   │   │   ├── trending-level.svg
    │   │   │   │   ├── trending-up.svg
    │   │   │   │   ├── txt.svg
    │   │   │   │   ├── unknown-file.svg
    │   │   │   │   ├── unlink.svg
    │   │   │   │   └── xls.svg
    │   │   │   ├── TableDeleteColumnIcon.tsx
    │   │   │   ├── TableDeleteRowIcon.tsx
    │   │   │   ├── TableInsertColumnIcon.tsx
    │   │   │   ├── TableInsertRowIcon.tsx
    │   │   │   ├── TrashIcon.tsx
    │   │   │   ├── TrendingDownIcon.tsx
    │   │   │   ├── TrendingLevelIcon.tsx
    │   │   │   ├── TrendingUpIcon.tsx
    │   │   │   ├── TxtIcon.tsx
    │   │   │   ├── UnknownFileIcon.tsx
    │   │   │   ├── UnlinkIcon.tsx
    │   │   │   ├── UserIcon.tsx
    │   │   │   ├── WarningIcon.tsx
    │   │   │   └── XlsIcon.tsx
    │   │   ├── IconProvider.tsx
    │   │   ├── IconRegistryContext.tsx
    │   │   ├── IFrame
    │   │   │   ├── IFrame.md
    │   │   │   ├── IFrame.module.scss
    │   │   │   ├── IFrame.spec.ts
    │   │   │   ├── IFrame.tsx
    │   │   │   └── IFrameNative.tsx
    │   │   ├── Image
    │   │   │   ├── Image.md
    │   │   │   ├── Image.module.scss
    │   │   │   ├── Image.spec.ts
    │   │   │   ├── Image.tsx
    │   │   │   └── ImageNative.tsx
    │   │   ├── Input
    │   │   │   ├── index.ts
    │   │   │   ├── InputAdornment.module.scss
    │   │   │   ├── InputAdornment.tsx
    │   │   │   ├── InputDivider.module.scss
    │   │   │   ├── InputDivider.tsx
    │   │   │   ├── InputLabel.module.scss
    │   │   │   ├── InputLabel.tsx
    │   │   │   ├── PartialInput.module.scss
    │   │   │   └── PartialInput.tsx
    │   │   ├── InspectButton
    │   │   │   ├── InspectButton.module.scss
    │   │   │   └── InspectButton.tsx
    │   │   ├── Items
    │   │   │   ├── Items.md
    │   │   │   ├── Items.spec.ts
    │   │   │   ├── Items.tsx
    │   │   │   └── ItemsNative.tsx
    │   │   ├── Link
    │   │   │   ├── Link.md
    │   │   │   ├── Link.module.scss
    │   │   │   ├── Link.spec.ts
    │   │   │   ├── Link.tsx
    │   │   │   └── LinkNative.tsx
    │   │   ├── List
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── List.md
    │   │   │   ├── List.module.scss
    │   │   │   ├── List.spec.ts
    │   │   │   ├── List.tsx
    │   │   │   └── ListNative.tsx
    │   │   ├── Logo
    │   │   │   ├── doc-resources
    │   │   │   │   └── xmlui-logo.svg
    │   │   │   ├── Logo.md
    │   │   │   ├── Logo.tsx
    │   │   │   └── LogoNative.tsx
    │   │   ├── Markdown
    │   │   │   ├── CodeText.module.scss
    │   │   │   ├── CodeText.tsx
    │   │   │   ├── Markdown.md
    │   │   │   ├── Markdown.module.scss
    │   │   │   ├── Markdown.spec.ts
    │   │   │   ├── Markdown.tsx
    │   │   │   ├── MarkdownNative.tsx
    │   │   │   ├── parse-binding-expr.ts
    │   │   │   └── utils.ts
    │   │   ├── metadata-helpers.ts
    │   │   ├── ModalDialog
    │   │   │   ├── ConfirmationModalContextProvider.tsx
    │   │   │   ├── Dialog.module.scss
    │   │   │   ├── Dialog.tsx
    │   │   │   ├── ModalDialog.md
    │   │   │   ├── ModalDialog.module.scss
    │   │   │   ├── ModalDialog.spec.ts
    │   │   │   ├── ModalDialog.tsx
    │   │   │   ├── ModalDialogNative.tsx
    │   │   │   └── ModalVisibilityContext.tsx
    │   │   ├── NavGroup
    │   │   │   ├── NavGroup.md
    │   │   │   ├── NavGroup.module.scss
    │   │   │   ├── NavGroup.spec.ts
    │   │   │   ├── NavGroup.tsx
    │   │   │   ├── NavGroupContext.ts
    │   │   │   └── NavGroupNative.tsx
    │   │   ├── NavLink
    │   │   │   ├── NavLink.md
    │   │   │   ├── NavLink.module.scss
    │   │   │   ├── NavLink.spec.ts
    │   │   │   ├── NavLink.tsx
    │   │   │   └── NavLinkNative.tsx
    │   │   ├── NavPanel
    │   │   │   ├── NavPanel.md
    │   │   │   ├── NavPanel.module.scss
    │   │   │   ├── NavPanel.spec.ts
    │   │   │   ├── NavPanel.tsx
    │   │   │   └── NavPanelNative.tsx
    │   │   ├── NestedApp
    │   │   │   ├── AppWithCodeView.module.scss
    │   │   │   ├── AppWithCodeView.tsx
    │   │   │   ├── AppWithCodeViewNative.tsx
    │   │   │   ├── defaultProps.tsx
    │   │   │   ├── logo.svg
    │   │   │   ├── NestedApp.module.scss
    │   │   │   ├── NestedApp.tsx
    │   │   │   ├── NestedAppNative.tsx
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── utils.ts
    │   │   ├── NoResult
    │   │   │   ├── NoResult.md
    │   │   │   ├── NoResult.module.scss
    │   │   │   ├── NoResult.spec.ts
    │   │   │   ├── NoResult.tsx
    │   │   │   └── NoResultNative.tsx
    │   │   ├── NumberBox
    │   │   │   ├── numberbox-abstractions.ts
    │   │   │   ├── NumberBox.md
    │   │   │   ├── NumberBox.module.scss
    │   │   │   ├── NumberBox.spec.ts
    │   │   │   ├── NumberBox.tsx
    │   │   │   └── NumberBoxNative.tsx
    │   │   ├── Option
    │   │   │   ├── Option.md
    │   │   │   ├── Option.spec.ts
    │   │   │   ├── Option.tsx
    │   │   │   ├── OptionNative.tsx
    │   │   │   └── OptionTypeProvider.tsx
    │   │   ├── PageMetaTitle
    │   │   │   ├── PageMetaTilteNative.tsx
    │   │   │   ├── PageMetaTitle.md
    │   │   │   ├── PageMetaTitle.spec.ts
    │   │   │   └── PageMetaTitle.tsx
    │   │   ├── Pages
    │   │   │   ├── Page.md
    │   │   │   ├── Pages.md
    │   │   │   ├── Pages.module.scss
    │   │   │   ├── Pages.tsx
    │   │   │   └── PagesNative.tsx
    │   │   ├── Pagination
    │   │   │   ├── Pagination.md
    │   │   │   ├── Pagination.module.scss
    │   │   │   ├── Pagination.spec.ts
    │   │   │   ├── Pagination.tsx
    │   │   │   └── PaginationNative.tsx
    │   │   ├── PositionedContainer
    │   │   │   ├── PositionedContainer.module.scss
    │   │   │   ├── PositionedContainer.tsx
    │   │   │   └── PositionedContainerNative.tsx
    │   │   ├── ProfileMenu
    │   │   │   ├── ProfileMenu.module.scss
    │   │   │   └── ProfileMenu.tsx
    │   │   ├── ProgressBar
    │   │   │   ├── ProgressBar.md
    │   │   │   ├── ProgressBar.module.scss
    │   │   │   ├── ProgressBar.spec.ts
    │   │   │   ├── ProgressBar.tsx
    │   │   │   └── ProgressBarNative.tsx
    │   │   ├── Queue
    │   │   │   ├── Queue.md
    │   │   │   ├── Queue.spec.ts
    │   │   │   ├── Queue.tsx
    │   │   │   ├── queueActions.ts
    │   │   │   └── QueueNative.tsx
    │   │   ├── RadioGroup
    │   │   │   ├── RadioGroup.md
    │   │   │   ├── RadioGroup.module.scss
    │   │   │   ├── RadioGroup.spec.ts
    │   │   │   ├── RadioGroup.tsx
    │   │   │   ├── RadioGroupNative.tsx
    │   │   │   ├── RadioItem.tsx
    │   │   │   └── RadioItemNative.tsx
    │   │   ├── RealTimeAdapter
    │   │   │   ├── RealTimeAdapter.tsx
    │   │   │   └── RealTimeAdapterNative.tsx
    │   │   ├── Redirect
    │   │   │   ├── Redirect.md
    │   │   │   ├── Redirect.spec.ts
    │   │   │   └── Redirect.tsx
    │   │   ├── ResponsiveBar
    │   │   │   ├── README.md
    │   │   │   ├── ResponsiveBar.md
    │   │   │   ├── ResponsiveBar.module.scss
    │   │   │   ├── ResponsiveBar.spec.ts
    │   │   │   ├── ResponsiveBar.tsx
    │   │   │   └── ResponsiveBarNative.tsx
    │   │   ├── Select
    │   │   │   ├── HiddenOption.tsx
    │   │   │   ├── OptionContext.ts
    │   │   │   ├── Select.md
    │   │   │   ├── Select.module.scss
    │   │   │   ├── Select.spec.ts
    │   │   │   ├── Select.tsx
    │   │   │   ├── SelectContext.tsx
    │   │   │   └── SelectNative.tsx
    │   │   ├── SelectionStore
    │   │   │   ├── SelectionStore.md
    │   │   │   ├── SelectionStore.tsx
    │   │   │   └── SelectionStoreNative.tsx
    │   │   ├── Slider
    │   │   │   ├── Slider.md
    │   │   │   ├── Slider.module.scss
    │   │   │   ├── Slider.spec.ts
    │   │   │   ├── Slider.tsx
    │   │   │   └── SliderNative.tsx
    │   │   ├── Slot
    │   │   │   ├── Slot.md
    │   │   │   ├── Slot.spec.ts
    │   │   │   └── Slot.ts
    │   │   ├── SlotItem.tsx
    │   │   ├── SpaceFiller
    │   │   │   ├── SpaceFiller.md
    │   │   │   ├── SpaceFiller.module.scss
    │   │   │   ├── SpaceFiller.spec.ts
    │   │   │   ├── SpaceFiller.tsx
    │   │   │   └── SpaceFillerNative.tsx
    │   │   ├── Spinner
    │   │   │   ├── Spinner.md
    │   │   │   ├── Spinner.module.scss
    │   │   │   ├── Spinner.spec.ts
    │   │   │   ├── Spinner.tsx
    │   │   │   └── SpinnerNative.tsx
    │   │   ├── Splitter
    │   │   │   ├── HSplitter.md
    │   │   │   ├── HSplitter.spec.ts
    │   │   │   ├── Splitter.md
    │   │   │   ├── Splitter.module.scss
    │   │   │   ├── Splitter.spec.ts
    │   │   │   ├── Splitter.tsx
    │   │   │   ├── SplitterNative.tsx
    │   │   │   ├── utils.ts
    │   │   │   ├── VSplitter.md
    │   │   │   └── VSplitter.spec.ts
    │   │   ├── Stack
    │   │   │   ├── CHStack.md
    │   │   │   ├── CHStack.spec.ts
    │   │   │   ├── CVStack.md
    │   │   │   ├── CVStack.spec.ts
    │   │   │   ├── HStack.md
    │   │   │   ├── HStack.spec.ts
    │   │   │   ├── Stack.md
    │   │   │   ├── Stack.module.scss
    │   │   │   ├── Stack.spec.ts
    │   │   │   ├── Stack.tsx
    │   │   │   ├── StackNative.tsx
    │   │   │   ├── VStack.md
    │   │   │   └── VStack.spec.ts
    │   │   ├── StickyBox
    │   │   │   ├── StickyBox.md
    │   │   │   ├── StickyBox.module.scss
    │   │   │   ├── StickyBox.tsx
    │   │   │   └── StickyBoxNative.tsx
    │   │   ├── Switch
    │   │   │   ├── Switch.md
    │   │   │   ├── Switch.spec.ts
    │   │   │   └── Switch.tsx
    │   │   ├── Table
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── react-table-config.d.ts
    │   │   │   ├── Table.md
    │   │   │   ├── Table.module.scss
    │   │   │   ├── Table.spec.ts
    │   │   │   ├── Table.tsx
    │   │   │   ├── TableNative.tsx
    │   │   │   └── useRowSelection.tsx
    │   │   ├── TableOfContents
    │   │   │   ├── TableOfContents.module.scss
    │   │   │   ├── TableOfContents.spec.ts
    │   │   │   ├── TableOfContents.tsx
    │   │   │   └── TableOfContentsNative.tsx
    │   │   ├── Tabs
    │   │   │   ├── TabContext.tsx
    │   │   │   ├── TabItem.md
    │   │   │   ├── TabItem.tsx
    │   │   │   ├── TabItemNative.tsx
    │   │   │   ├── Tabs.md
    │   │   │   ├── Tabs.module.scss
    │   │   │   ├── Tabs.spec.ts
    │   │   │   ├── Tabs.tsx
    │   │   │   └── TabsNative.tsx
    │   │   ├── Text
    │   │   │   ├── Text.md
    │   │   │   ├── Text.module.scss
    │   │   │   ├── Text.spec.ts
    │   │   │   ├── Text.tsx
    │   │   │   └── TextNative.tsx
    │   │   ├── TextArea
    │   │   │   ├── TextArea.md
    │   │   │   ├── TextArea.module.scss
    │   │   │   ├── TextArea.spec.ts
    │   │   │   ├── TextArea.tsx
    │   │   │   ├── TextAreaNative.tsx
    │   │   │   ├── TextAreaResizable.tsx
    │   │   │   └── useComposedRef.ts
    │   │   ├── TextBox
    │   │   │   ├── TextBox.md
    │   │   │   ├── TextBox.module.scss
    │   │   │   ├── TextBox.spec.ts
    │   │   │   ├── TextBox.tsx
    │   │   │   └── TextBoxNative.tsx
    │   │   ├── Theme
    │   │   │   ├── NotificationToast.tsx
    │   │   │   ├── Theme.md
    │   │   │   ├── Theme.module.scss
    │   │   │   ├── Theme.spec.ts
    │   │   │   ├── Theme.tsx
    │   │   │   └── ThemeNative.tsx
    │   │   ├── TimeInput
    │   │   │   ├── TimeInput.md
    │   │   │   ├── TimeInput.module.scss
    │   │   │   ├── TimeInput.spec.ts
    │   │   │   ├── TimeInput.tsx
    │   │   │   ├── TimeInputNative.tsx
    │   │   │   └── utils.ts
    │   │   ├── Timer
    │   │   │   ├── Timer.md
    │   │   │   ├── Timer.spec.ts
    │   │   │   ├── Timer.tsx
    │   │   │   └── TimerNative.tsx
    │   │   ├── Toggle
    │   │   │   ├── Toggle.module.scss
    │   │   │   └── Toggle.tsx
    │   │   ├── ToneChangerButton
    │   │   │   ├── ToneChangerButton.md
    │   │   │   ├── ToneChangerButton.spec.ts
    │   │   │   └── ToneChangerButton.tsx
    │   │   ├── ToneSwitch
    │   │   │   ├── ToneSwitch.md
    │   │   │   ├── ToneSwitch.module.scss
    │   │   │   ├── ToneSwitch.spec.ts
    │   │   │   ├── ToneSwitch.tsx
    │   │   │   └── ToneSwitchNative.tsx
    │   │   ├── Tooltip
    │   │   │   ├── Tooltip.md
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.spec.ts
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── TooltipNative.tsx
    │   │   ├── Tree
    │   │   │   ├── testData.ts
    │   │   │   ├── Tree-dynamic.spec.ts
    │   │   │   ├── Tree-icons.spec.ts
    │   │   │   ├── Tree.md
    │   │   │   ├── Tree.spec.ts
    │   │   │   ├── TreeComponent.module.scss
    │   │   │   ├── TreeComponent.tsx
    │   │   │   └── TreeNative.tsx
    │   │   ├── TreeDisplay
    │   │   │   ├── TreeDisplay.md
    │   │   │   ├── TreeDisplay.module.scss
    │   │   │   ├── TreeDisplay.tsx
    │   │   │   └── TreeDisplayNative.tsx
    │   │   ├── ValidationSummary
    │   │   │   ├── ValidationSummary.module.scss
    │   │   │   └── ValidationSummary.tsx
    │   │   └── VisuallyHidden.tsx
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   ├── ComponentRenderer.ts
    │   │   │   ├── LoaderRenderer.ts
    │   │   │   ├── standalone.ts
    │   │   │   └── treeAbstractions.ts
    │   │   ├── action
    │   │   │   ├── actions.ts
    │   │   │   ├── APICall.tsx
    │   │   │   ├── FileDownloadAction.tsx
    │   │   │   ├── FileUploadAction.tsx
    │   │   │   ├── NavigateAction.tsx
    │   │   │   └── TimedAction.tsx
    │   │   ├── ApiBoundComponent.tsx
    │   │   ├── appContext
    │   │   │   ├── date-functions.ts
    │   │   │   ├── math-function.ts
    │   │   │   └── misc-utils.ts
    │   │   ├── AppContext.tsx
    │   │   ├── behaviors
    │   │   │   ├── Behavior.tsx
    │   │   │   └── CoreBehaviors.tsx
    │   │   ├── component-hooks.ts
    │   │   ├── ComponentDecorator.tsx
    │   │   ├── ComponentViewer.tsx
    │   │   ├── CompoundComponent.tsx
    │   │   ├── constants.ts
    │   │   ├── DebugViewProvider.tsx
    │   │   ├── descriptorHelper.ts
    │   │   ├── devtools
    │   │   │   ├── InspectorDialog.module.scss
    │   │   │   ├── InspectorDialog.tsx
    │   │   │   └── InspectorDialogVisibilityContext.tsx
    │   │   ├── EngineError.ts
    │   │   ├── event-handlers.ts
    │   │   ├── InspectorButton.module.scss
    │   │   ├── InspectorContext.tsx
    │   │   ├── interception
    │   │   │   ├── abstractions.ts
    │   │   │   ├── ApiInterceptor.ts
    │   │   │   ├── ApiInterceptorProvider.tsx
    │   │   │   ├── apiInterceptorWorker.ts
    │   │   │   ├── Backend.ts
    │   │   │   ├── Errors.ts
    │   │   │   ├── IndexedDb.ts
    │   │   │   ├── initMock.ts
    │   │   │   ├── InMemoryDb.ts
    │   │   │   ├── ReadonlyCollection.ts
    │   │   │   └── useApiInterceptorContext.tsx
    │   │   ├── loader
    │   │   │   ├── ApiLoader.tsx
    │   │   │   ├── DataLoader.tsx
    │   │   │   ├── ExternalDataLoader.tsx
    │   │   │   ├── Loader.tsx
    │   │   │   ├── MockLoaderRenderer.tsx
    │   │   │   └── PageableLoader.tsx
    │   │   ├── LoaderComponent.tsx
    │   │   ├── markup-check.ts
    │   │   ├── parts.ts
    │   │   ├── renderers.ts
    │   │   ├── rendering
    │   │   │   ├── AppContent.tsx
    │   │   │   ├── AppRoot.tsx
    │   │   │   ├── AppWrapper.tsx
    │   │   │   ├── buildProxy.ts
    │   │   │   ├── collectFnVarDeps.ts
    │   │   │   ├── ComponentAdapter.tsx
    │   │   │   ├── ComponentWrapper.tsx
    │   │   │   ├── Container.tsx
    │   │   │   ├── containers.ts
    │   │   │   ├── ContainerWrapper.tsx
    │   │   │   ├── ErrorBoundary.module.scss
    │   │   │   ├── ErrorBoundary.tsx
    │   │   │   ├── InvalidComponent.module.scss
    │   │   │   ├── InvalidComponent.tsx
    │   │   │   ├── nodeUtils.ts
    │   │   │   ├── reducer.ts
    │   │   │   ├── renderChild.tsx
    │   │   │   ├── StandaloneComponent.tsx
    │   │   │   ├── StateContainer.tsx
    │   │   │   ├── UnknownComponent.module.scss
    │   │   │   ├── UnknownComponent.tsx
    │   │   │   └── valueExtractor.ts
    │   │   ├── reportEngineError.ts
    │   │   ├── RestApiProxy.ts
    │   │   ├── script-runner
    │   │   │   ├── asyncProxy.ts
    │   │   │   ├── AttributeValueParser.ts
    │   │   │   ├── bannedFunctions.ts
    │   │   │   ├── BindingTreeEvaluationContext.ts
    │   │   │   ├── eval-tree-async.ts
    │   │   │   ├── eval-tree-common.ts
    │   │   │   ├── eval-tree-sync.ts
    │   │   │   ├── ParameterParser.ts
    │   │   │   ├── process-statement-async.ts
    │   │   │   ├── process-statement-common.ts
    │   │   │   ├── process-statement-sync.ts
    │   │   │   ├── ScriptingSourceTree.ts
    │   │   │   ├── simplify-expression.ts
    │   │   │   ├── statement-queue.ts
    │   │   │   └── visitors.ts
    │   │   ├── StandaloneApp.tsx
    │   │   ├── StandaloneExtensionManager.ts
    │   │   ├── TableOfContentsContext.tsx
    │   │   ├── theming
    │   │   │   ├── _themes.scss
    │   │   │   ├── component-layout-resolver.ts
    │   │   │   ├── extendThemeUtils.ts
    │   │   │   ├── hvar.ts
    │   │   │   ├── layout-resolver.ts
    │   │   │   ├── parse-layout-props.ts
    │   │   │   ├── StyleContext.tsx
    │   │   │   ├── StyleRegistry.ts
    │   │   │   ├── ThemeContext.tsx
    │   │   │   ├── ThemeProvider.tsx
    │   │   │   ├── themes
    │   │   │   │   ├── base-utils.ts
    │   │   │   │   ├── palette.ts
    │   │   │   │   ├── root.ts
    │   │   │   │   ├── solid.ts
    │   │   │   │   ├── theme-colors.ts
    │   │   │   │   └── xmlui.ts
    │   │   │   ├── themeVars.module.scss
    │   │   │   ├── themeVars.ts
    │   │   │   ├── transformThemeVars.ts
    │   │   │   └── utils.ts
    │   │   ├── utils
    │   │   │   ├── actionUtils.ts
    │   │   │   ├── audio-utils.ts
    │   │   │   ├── base64-utils.ts
    │   │   │   ├── compound-utils.ts
    │   │   │   ├── css-utils.ts
    │   │   │   ├── DataLoaderQueryKeyGenerator.ts
    │   │   │   ├── date-utils.ts
    │   │   │   ├── extractParam.ts
    │   │   │   ├── hooks.tsx
    │   │   │   ├── LruCache.ts
    │   │   │   ├── mergeProps.ts
    │   │   │   ├── misc.ts
    │   │   │   ├── request-params.ts
    │   │   │   ├── statementUtils.ts
    │   │   │   └── treeUtils.ts
    │   │   └── xmlui-parser.ts
    │   ├── index-standalone.ts
    │   ├── index.scss
    │   ├── index.ts
    │   ├── language-server
    │   │   ├── server-common.ts
    │   │   ├── server-web-worker.ts
    │   │   ├── server.ts
    │   │   ├── services
    │   │   │   ├── common
    │   │   │   │   ├── docs-generation.ts
    │   │   │   │   ├── lsp-utils.ts
    │   │   │   │   ├── metadata-utils.ts
    │   │   │   │   └── syntax-node-utilities.ts
    │   │   │   ├── completion.ts
    │   │   │   ├── diagnostic.ts
    │   │   │   ├── format.ts
    │   │   │   └── hover.ts
    │   │   └── xmlui-metadata-generated.mjs
    │   ├── logging
    │   │   ├── LoggerContext.tsx
    │   │   ├── LoggerInitializer.tsx
    │   │   ├── LoggerService.ts
    │   │   └── xmlui.ts
    │   ├── logo.svg
    │   ├── parsers
    │   │   ├── common
    │   │   │   ├── GenericToken.ts
    │   │   │   ├── InputStream.ts
    │   │   │   └── utils.ts
    │   │   ├── scripting
    │   │   │   ├── code-behind-collect.ts
    │   │   │   ├── Lexer.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── Parser.ts
    │   │   │   ├── ParserError.ts
    │   │   │   ├── ScriptingNodeTypes.ts
    │   │   │   ├── TokenTrait.ts
    │   │   │   ├── TokenType.ts
    │   │   │   └── tree-visitor.ts
    │   │   ├── style-parser
    │   │   │   ├── errors.ts
    │   │   │   ├── source-tree.ts
    │   │   │   ├── StyleInputStream.ts
    │   │   │   ├── StyleLexer.ts
    │   │   │   ├── StyleParser.ts
    │   │   │   └── tokens.ts
    │   │   └── xmlui-parser
    │   │       ├── CharacterCodes.ts
    │   │       ├── diagnostics.ts
    │   │       ├── fileExtensions.ts
    │   │       ├── index.ts
    │   │       ├── lint.ts
    │   │       ├── parser.ts
    │   │       ├── ParserError.ts
    │   │       ├── scanner.ts
    │   │       ├── syntax-kind.ts
    │   │       ├── syntax-node.ts
    │   │       ├── transform.ts
    │   │       ├── utils.ts
    │   │       ├── xmlui-serializer.ts
    │   │       └── xmlui-tree.ts
    │   ├── react-app-env.d.ts
    │   ├── syntax
    │   │   ├── monaco
    │   │   │   ├── grammar.monacoLanguage.ts
    │   │   │   ├── index.ts
    │   │   │   ├── xmlui-dark.ts
    │   │   │   ├── xmlui-light.ts
    │   │   │   └── xmluiscript.monacoLanguage.ts
    │   │   └── textMate
    │   │       ├── index.ts
    │   │       ├── xmlui-dark.json
    │   │       ├── xmlui-light.json
    │   │       ├── xmlui.json
    │   │       └── xmlui.tmLanguage.json
    │   ├── testing
    │   │   ├── assertions.ts
    │   │   ├── component-test-helpers.ts
    │   │   ├── ComponentDrivers.ts
    │   │   ├── drivers
    │   │   │   ├── DateInputDriver.ts
    │   │   │   ├── ModalDialogDriver.ts
    │   │   │   ├── NumberBoxDriver.ts
    │   │   │   ├── TextBoxDriver.ts
    │   │   │   ├── TimeInputDriver.ts
    │   │   │   ├── TimerDriver.ts
    │   │   │   └── TreeDriver.ts
    │   │   ├── fixtures.ts
    │   │   ├── infrastructure
    │   │   │   ├── index.html
    │   │   │   ├── main.tsx
    │   │   │   ├── public
    │   │   │   │   ├── mockServiceWorker.js
    │   │   │   │   ├── resources
    │   │   │   │   │   ├── bell.svg
    │   │   │   │   │   ├── box.svg
    │   │   │   │   │   ├── doc.svg
    │   │   │   │   │   ├── eye.svg
    │   │   │   │   │   ├── flower-640x480.jpg
    │   │   │   │   │   ├── sun.svg
    │   │   │   │   │   ├── test-image-100x100.jpg
    │   │   │   │   │   └── txt.svg
    │   │   │   │   └── serve.json
    │   │   │   └── TestBed.tsx
    │   │   └── themed-app-test-helpers.ts
    │   └── vite-env.d.ts
    ├── tests
    │   ├── components
    │   │   ├── CodeBlock
    │   │   │   └── hightlight-code.test.ts
    │   │   ├── playground-pattern.test.ts
    │   │   └── Tree
    │   │       └── Tree-states.test.ts
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   └── treeAbstractions.test.ts
    │   │   ├── container
    │   │   │   └── buildProxy.test.ts
    │   │   ├── interception
    │   │   │   ├── orderBy.test.ts
    │   │   │   ├── ReadOnlyCollection.test.ts
    │   │   │   └── request-param-converter.test.ts
    │   │   ├── scripts-runner
    │   │   │   ├── AttributeValueParser.test.ts
    │   │   │   ├── eval-tree-arrow-async.test.ts
    │   │   │   ├── eval-tree-arrow.test.ts
    │   │   │   ├── eval-tree-func-decl-async.test.ts
    │   │   │   ├── eval-tree-func-decl.test.ts
    │   │   │   ├── eval-tree-pre-post.test.ts
    │   │   │   ├── eval-tree-regression.test.ts
    │   │   │   ├── eval-tree.test.ts
    │   │   │   ├── function-proxy.test.ts
    │   │   │   ├── parser-regression.test.ts
    │   │   │   ├── process-event.test.ts
    │   │   │   ├── process-function.test.ts
    │   │   │   ├── process-implicit-context.test.ts
    │   │   │   ├── process-statement-asgn.test.ts
    │   │   │   ├── process-statement-destruct.test.ts
    │   │   │   ├── process-statement-regs.test.ts
    │   │   │   ├── process-statement-sync.test.ts
    │   │   │   ├── process-statement.test.ts
    │   │   │   ├── process-switch-sync.test.ts
    │   │   │   ├── process-switch.test.ts
    │   │   │   ├── process-try-sync.test.ts
    │   │   │   ├── process-try.test.ts
    │   │   │   └── test-helpers.ts
    │   │   ├── test-metadata-handler.ts
    │   │   ├── theming
    │   │   │   ├── border-segments.test.ts
    │   │   │   ├── component-layout.resolver.test.ts
    │   │   │   ├── layout-property-parser.test.ts
    │   │   │   ├── layout-resolver.test.ts
    │   │   │   ├── layout-resolver2.test.ts
    │   │   │   ├── layout-vp-override.test.ts
    │   │   │   └── padding-segments.test.ts
    │   │   └── utils
    │   │       ├── date-utils.test.ts
    │   │       ├── format-human-elapsed-time.test.ts
    │   │       └── LruCache.test.ts
    │   ├── language-server
    │   │   ├── completion.test.ts
    │   │   ├── format.test.ts
    │   │   ├── hover.test.ts
    │   │   └── mockData.ts
    │   └── parsers
    │       ├── common
    │       │   └── input-stream.test.ts
    │       ├── markdown
    │       │   └── parse-binding-expression.test.ts
    │       ├── parameter-parser.test.ts
    │       ├── paremeter-parser.test.ts
    │       ├── scripting
    │       │   ├── eval-tree-arrow.test.ts
    │       │   ├── eval-tree-pre-post.test.ts
    │       │   ├── eval-tree.test.ts
    │       │   ├── function-proxy.test.ts
    │       │   ├── lexer-literals.test.ts
    │       │   ├── lexer-misc.test.ts
    │       │   ├── module-parse.test.ts
    │       │   ├── parser-arrow.test.ts
    │       │   ├── parser-assignments.test.ts
    │       │   ├── parser-binary.test.ts
    │       │   ├── parser-destructuring.test.ts
    │       │   ├── parser-errors.test.ts
    │       │   ├── parser-expressions.test.ts
    │       │   ├── parser-function.test.ts
    │       │   ├── parser-literals.test.ts
    │       │   ├── parser-primary.test.ts
    │       │   ├── parser-regex.test.ts
    │       │   ├── parser-statements.test.ts
    │       │   ├── parser-unary.test.ts
    │       │   ├── process-event.test.ts
    │       │   ├── process-implicit-context.test.ts
    │       │   ├── process-statement-asgn.test.ts
    │       │   ├── process-statement-destruct.test.ts
    │       │   ├── process-statement-regs.test.ts
    │       │   ├── process-statement-sync.test.ts
    │       │   ├── process-statement.test.ts
    │       │   ├── process-switch-sync.test.ts
    │       │   ├── process-switch.test.ts
    │       │   ├── process-try-sync.test.ts
    │       │   ├── process-try.test.ts
    │       │   ├── simplify-expression.test.ts
    │       │   ├── statement-hooks.test.ts
    │       │   └── test-helpers.ts
    │       ├── style-parser
    │       │   ├── generateHvarChain.test.ts
    │       │   ├── parseHVar.test.ts
    │       │   ├── parser.test.ts
    │       │   └── tokens.test.ts
    │       └── xmlui
    │           ├── lint.test.ts
    │           ├── parser.test.ts
    │           ├── scanner.test.ts
    │           ├── transform.attr.test.ts
    │           ├── transform.circular.test.ts
    │           ├── transform.element.test.ts
    │           ├── transform.errors.test.ts
    │           ├── transform.escape.test.ts
    │           ├── transform.regression.test.ts
    │           ├── transform.script.test.ts
    │           ├── transform.test.ts
    │           └── xmlui.ts
    ├── tests-e2e
    │   ├── api-bound-component-regression.spec.ts
    │   ├── api-call-as-extracted-component.spec.ts
    │   ├── assign-to-object-or-array-regression.spec.ts
    │   ├── binding-regression.spec.ts
    │   ├── children-as-template-context-vars.spec.ts
    │   ├── compound-component.spec.ts
    │   ├── context-vars-regression.spec.ts
    │   ├── data-bindings.spec.ts
    │   ├── datasource-and-api-usage-in-var.spec.ts
    │   ├── datasource-direct-binding.spec.ts
    │   ├── datasource-onLoaded-regression.spec.ts
    │   ├── modify-array-item-regression.spec.ts
    │   ├── namespaces.spec.ts
    │   ├── push-to-array-regression.spec.ts
    │   ├── screen-breakpoints.spec.ts
    │   ├── scripting.spec.ts
    │   ├── state-scope-in-pages.spec.ts
    │   └── state-var-scopes.spec.ts
    ├── tsconfig.bin.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── vite.config.ts
    └── vitest.config.ts
```

# Files

--------------------------------------------------------------------------------
/docs/public/pages/reactive-intro.md:
--------------------------------------------------------------------------------

```markdown
 1 | # Reactive data binding
 2 | 
 3 | Let's load that same London tube data into a [Select](/components/Select) component.
 4 | 
 5 | ```xmlui-pg height="280px" name="pick a station"
 6 | ---app display
 7 | <App>
 8 |   <Select id="lines" initialValue="bakerloo" dropdownHeight="200px">
 9 |     <Items data="https://api.tfl.gov.uk/line/mode/tube/status">
10 |       <Option value="{$item.id}" label="{$item.name}" />
11 |     </Items>
12 |   </Select>
13 | </App>
14 | ```
15 | 
16 | The `Select` uses the same API as the `List`. It contains an <a href="/components/Items">Items</a> component which is another way to loop through a sequence and embed a component that receives each item. In this case what's embedded is a selectable <a href="/components/Option">Option</a> which again receives the `$item` variable.
17 | 
18 | Nothing happens yet when you select a tube line. Let's wire up the selection to display details for the selected line in a <a href="/components/Table">Table</a>.
19 | 
20 | ```xmlui-pg name="pick a station"
21 | ---app display /lines/ /tubeStations/
22 | <App>
23 |   <Select id="lines" initialValue="bakerloo">
24 |     <Items data="https://api.tfl.gov.uk/line/mode/tube/status">
25 |         <Option value="{$item.id}" label="{$item.name}" />
26 |     </Items>
27 |   </Select>
28 | 
29 |   <DataSource
30 |     id="tubeStations"
31 |     when="{lines.value}"
32 |     url="https://api.tfl.gov.uk/Line/{lines.value}/Route/Sequence/inbound"
33 |     resultSelector="stations"/>
34 | 
35 |   <Table data="{tubeStations}" height="280px">
36 |     <Column bindTo="name" />
37 |     <Column bindTo="modes" />
38 |   </Table>
39 | </App>
40 | ```
41 | 
42 | The <a href="/components/DataSource">DataSource</a> component works like the `data` attribute we used with `List` and `Items`: it fetches from a REST endpoint. Unlike `List`,`Select`, and `Table`, `DataSource` isn't a visible component. It works behind the scenes to capture data for use by visible components.
43 | 
44 | In this case the returned data object is big and complex, and we only want to display data from the `stations` object nested within it.
45 | The `resultSelector` property on the `DataSource` targets the nested `stations` object so we can feed just that data into the table.
46 | 
47 | 
48 | ## Reactive magic
49 | 
50 | The `Select` is wired to the `Table`. When you make a new selection, the table fills with details for the selected line. Try it!
51 | 
52 | How does this work? Note how the `Select` declares the property `id="lines"`.
53 | 
54 | ```xmlui /lines/
55 | <Select id="lines" initialValue="bakerloo" width="30%">
56 | ```
57 | 
58 | That makes `lines` a variable accessible other XMLUI components, and `lines.value` holds the value of the current selection.
59 | 
60 | Now look at the `url` property of the `DataSource`.
61 | 
62 | ```xmlui /{lines.value}/
63 | <DataSource
64 |   id="tubeStations"
65 |   url="https://api.tfl.gov.uk/Line/{lines.value}/Route/Sequence/inbound"
66 |   resultSelector="stations"/>
67 | ```
68 | 
69 | It embeds a reference to `lines.value`. When you loaded this page, that URL fetched details for the initial value of the `Select`. Changing the selection changes `lines.value` which causes the `DataSource` to fetch a new batch of details. Likewise the `Table`'s `data` property refers to `tubeStations` (the `DataSource` id) so it automatically displays the new data.
70 | 
71 | There's a name for this pattern: reactive data binding. It's what spreadsheets do when a change in one cell propagates to others that refer to it. And it's what the popular framework React enables for web apps. React, as you may know, is a complex beast that only expert programmers can tame. Fortunately the expert programmers who build XMLUI have done that for you. When you build apps declaratively with XMLUI you enjoy the benefit of reactive data binding without the burden of React's complexity. You don't need to write code to make this magic happen, it's automatic!
72 | 
73 | So far we've seen examples of built-in XMLUI components. But it's easy to make your own too, in the next chapter we'll see how.
74 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/TextArea/TextArea.module.scss:
--------------------------------------------------------------------------------

```scss
  1 | @use "../../components-core/theming/themes" as t;
  2 | 
  3 | // --- This code snippet is required to collect the theme variables used in this module
  4 | $themeVars: (
  5 | );
  6 | 
  7 | @function createThemeVar($componentVariable) {
  8 |   $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  9 |   @return t.getThemeVar($themeVars, $componentVariable);
 10 | }
 11 | 
 12 | $componentName: "TextArea";
 13 | $themeVars: t.composePaddingVars($themeVars, $componentName);
 14 | 
 15 | // --- CSS properties of a particular Textarea variant
 16 | @mixin variant($variantName) {
 17 |   border-radius: createThemeVar("Input:borderRadius-#{$componentName}-#{$variantName}");
 18 |   border-color: createThemeVar("Input:borderColor-#{$componentName}-#{$variantName}");
 19 |   border-width: createThemeVar("Input:borderWidth-#{$componentName}-#{$variantName}");
 20 |   border-style: createThemeVar("Input:borderStyle-#{$componentName}-#{$variantName}");
 21 |   font-size: createThemeVar("Input:fontSize-#{$componentName}-#{$variantName}");
 22 | 
 23 |   background-color: createThemeVar("Input:backgroundColor-#{$componentName}-#{$variantName}");
 24 |   box-shadow: createThemeVar("Input:boxShadow-#{$componentName}-#{$variantName}");
 25 |   color: createThemeVar("Input:textColor-#{$componentName}-#{$variantName}");
 26 | 
 27 |   &:hover {
 28 |     border-color: createThemeVar("Input:borderColor-#{$componentName}-#{$variantName}--hover");
 29 |     background-color: createThemeVar("Input:backgroundColor-#{$componentName}-#{$variantName}--hover"
 30 |     );
 31 |     box-shadow: createThemeVar("Input:boxShadow-#{$componentName}-#{$variantName}--hover");
 32 |     color: createThemeVar("Input:textColor-#{$componentName}-#{$variantName}--hover");
 33 |   }
 34 | 
 35 |   &:focus-within {
 36 |     border-color: createThemeVar("Input:borderColor-#{$componentName}-#{$variantName}--focus");
 37 |     background-color: createThemeVar("Input:backgroundColor-#{$componentName}-#{$variantName}--focus"
 38 |     );
 39 |     box-shadow: createThemeVar("Input:boxShadow-#{$componentName}-#{$variantName}--focus");
 40 |     color: createThemeVar("Input:textColor-#{$componentName}-#{$variantName}--focus");
 41 |   }
 42 | 
 43 |   &:focus-visible {
 44 |     outline-width: createThemeVar("Input:outlineWidth-#{$componentName}-#{$variantName}--focus");
 45 |     outline-color: createThemeVar("Input:outlineColor-#{$componentName}-#{$variantName}--focus");
 46 |     outline-style: createThemeVar("Input:outlineStyle-#{$componentName}-#{$variantName}--focus");
 47 |     outline-offset: createThemeVar("Input:outlineOffset-#{$componentName}-#{$variantName}--focus");
 48 |   }
 49 | 
 50 |   &::placeholder {
 51 |     color: createThemeVar("Input:textColor-placeholder-#{$componentName}-#{$variantName}");
 52 |     font-size: createThemeVar("Input:fontSize-placeholder-#{$componentName}-#{$variantName}");
 53 |   }
 54 | }
 55 | 
 56 | @layer components {
 57 |   .textarea {
 58 |     display: block;
 59 |     width: 100%;
 60 |     line-height: 1.5em;
 61 |     outline: none;
 62 |     resize: none;
 63 |     border-style: solid;
 64 |     border-width: 1px;
 65 |     transition:
 66 |       border 0.1s ease-in-out,
 67 |       box-shadow 0.1s ease-in-out,
 68 |       background 0.1s ease-in-out;
 69 |     @include t.paddingVars($themeVars, $componentName);
 70 |     @include variant("default");
 71 | 
 72 |     &.error {
 73 |       @include variant("error");
 74 |     }
 75 | 
 76 |     &.warning {
 77 |       @include variant("warning");
 78 |     }
 79 | 
 80 |     &.valid {
 81 |       @include variant("success");
 82 |     }
 83 | 
 84 |     &:is(:disabled) {
 85 |       cursor: not-allowed;
 86 |       background-color: createThemeVar("Input:backgroundColor-#{$componentName}--disabled");
 87 |       color: createThemeVar("Input:textColor-#{$componentName}--disabled");
 88 |       border-color: createThemeVar("Input:borderColor-#{$componentName}--disabled");
 89 |     }
 90 |   }
 91 | 
 92 |   .resizeHorizontal {
 93 |     resize: horizontal;
 94 |   }
 95 | 
 96 |   .resizeVertical {
 97 |     resize: vertical;
 98 |   }
 99 | 
100 |   .resizeBoth {
101 |     resize: both;
102 |   }
103 | }
104 | 
105 | // --- We export the theme variables to add them to the component renderer
106 | :export {
107 |   themeVars: t.json-stringify($themeVars);
108 | }
```

--------------------------------------------------------------------------------
/xmlui/src/parsers/xmlui-parser/ParserError.ts:
--------------------------------------------------------------------------------

```typescript
  1 | // The common root class of all parser error objects
  2 | export class ParserError extends Error {
  3 |   constructor(
  4 |     message: string,
  5 |     public code?: string,
  6 |   ) {
  7 |     super(`${code ? `${code}: ` : ""}${message}`);
  8 | 
  9 |     // --- Set the prototype explicitly.
 10 |     Object.setPrototypeOf(this, ParserError.prototype);
 11 |   }
 12 | }
 13 | 
 14 | // Describes the structure of error messages
 15 | export interface ParserErrorMessage {
 16 |   code: ErrorCodes;
 17 |   text: string;
 18 |   position: number;
 19 |   line: number;
 20 |   column: number;
 21 | }
 22 | 
 23 | export type ErrorCodes =
 24 |   | "U001"
 25 |   | "U002"
 26 |   | "U003"
 27 |   | "U004"
 28 |   | "U005"
 29 |   | "U006"
 30 |   | "U007"
 31 |   | "U008"
 32 |   | "U009"
 33 |   | "U010"
 34 |   | "U011"
 35 |   | "U012"
 36 |   | "U013"
 37 |   | "U014"
 38 |   | "U015"
 39 |   | "T001"
 40 |   | "T002"
 41 |   | "T003"
 42 |   | "T004"
 43 |   | "T005"
 44 |   | "T006"
 45 |   | "T007"
 46 |   | "T008"
 47 |   | "T009"
 48 |   | "T010"
 49 |   | "T011"
 50 |   | "T012"
 51 |   | "T013"
 52 |   | "T014"
 53 |   | "T015"
 54 |   | "T016"
 55 |   | "T017"
 56 |   | "T018"
 57 |   | "T019"
 58 |   | "T020"
 59 |   | "T021"
 60 |   | "T022"
 61 |   | "T023"
 62 |   | "T024"
 63 |   | "T025"
 64 |   | "T026"
 65 |   | "T027"
 66 |   | "T028"
 67 |   | "T029";
 68 | 
 69 | // Error message type description
 70 | type ErrorText = Record<ErrorCodes, string>;
 71 | 
 72 | // The error messages of error codes
 73 | export const errorMessages: ErrorText = {
 74 |   U001: "Unexpected token: {0}.",
 75 |   U002: "A component definition can have exactly one XMLUI element.",
 76 |   U003: "A '<' token expected.",
 77 |   U004: "A node identifier expected.",
 78 |   U005: "A '</' token expected.",
 79 |   U006: "A '>' or '/>' token expected.",
 80 |   U007: "An '{0}' ID expected in the closing tag but '{1}' received.",
 81 |   U008: "A '>' token expected.",
 82 |   U009: "An attribute identifier expected.",
 83 |   U010: "An '=' token expected.",
 84 |   U011: "An attribute value expected.",
 85 |   U012: "Duplicated attribute: '{0}'.",
 86 |   U013: "Attribute name cannot start with an uppercase letter.",
 87 |   U014: "An '{0}' ID expected in the closing tag's namespace but '{1}' received.",
 88 |   U015: "Unexpected token in text element: {0}.",
 89 | 
 90 |   T001: "A component definition must have exactly one XMLUI element.",
 91 |   T002: "A component definition's name must start with an uppercase letter.",
 92 |   T003: "A reusable component must have a non-empty name.",
 93 |   T004: "A reusable component's name must start with an uppercase letter.",
 94 |   T005: "A reusable component must have at least one nested component definition.",
 95 |   T006: "A reusable component definition cannot nest another one.",
 96 |   T007: `Invalid attribute name: '{0}'`,
 97 |   T008: `Event attribute names should not start with 'on' prefix: '{0}'`,
 98 |   T009: `Invalid node name '{0}' in a component definition`,
 99 |   T010: `The '{0}' element does not accept a text child`,
100 |   T011: "Only 'name', 'value', and type hint attributes are accepted in '{0}'.",
101 |   T012: "The 'name' attribute in '{0}' is required.",
102 |   T013: "A loader element must have an id.",
103 |   T014: "A loader element must not have '{0}'.",
104 |   T015: "The uses element must define only a non-empty 'value' attribute.",
105 |   T016: "Only 'field' or 'item' are accepted as a child element.",
106 |   T017: "Cannot mix 'field' and 'item' nodes within an element.",
107 |   T018: "The '{0}' node cannot have a 'name' attribute.",
108 |   T019: "The 'value' attribute in '{0}' is required.",
109 |   T020: "Cannot mix nested components and non-component children.",
110 |   T021: "Invalid reusable component attribute '{0}'.",
111 |   T022: "The 'script' tag must not have any attribute.",
112 |   T023: "A 'script' tag cannot nest other child nodes, only text.",
113 |   T024: "Cannot put a reusable component definitions into a slot.",
114 |   T025: "Duplicate xmlns found: '{0}'.",
115 |   T026: "The top level component's name cannot have a namespace.",
116 |   T027: "Cannot resolve namespace '{0}'. It was not defined in any of the ancestor components.",
117 |   T028: "Incorrect namespace value '{0}'. {1}",
118 |   T029: "Incorrect scheme specified before ':' (colon) in namespace {0}. Delete it to get the default '{1}'.",
119 | };
120 | 
```

--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/CodeSelector.tsx:
--------------------------------------------------------------------------------

```typescript
  1 | import { forwardRef, useMemo, useState } from "react";
  2 | import * as RadixSelect from "@radix-ui/react-select";
  3 | import selectStyles from "./Select.module.scss";
  4 | import { usePlayground } from "../hooks/usePlayground";
  5 | import { contentChanged } from "../state/store";
  6 | import { useTheme, Button, type CompoundComponentDef, Icon, type ThemeDefinition } from "xmlui";
  7 | 
  8 | export const SelectItem = forwardRef(({ children, className, ...props }: any, forwardedRef) => {
  9 |   return (
 10 |     <RadixSelect.Item className={selectStyles.RadixMenuItem} {...props} ref={forwardedRef}>
 11 |       <RadixSelect.ItemText>{children}</RadixSelect.ItemText>
 12 |     </RadixSelect.Item>
 13 |   );
 14 | });
 15 | 
 16 | SelectItem.displayName = "SelectItem";
 17 | 
 18 | export const CodeSelector = () => {
 19 |   const { appDescription, options, dispatch } = usePlayground();
 20 |   const [open, setOpen] = useState(false);
 21 |   const { root } = useTheme();
 22 | 
 23 |   const selectedValue = useMemo(() => {
 24 |     let content = "";
 25 |     if (options.content === "app") {
 26 |       content = "Main.xmlui";
 27 |     } else if (content === "config") {
 28 |       content = "config.json";
 29 |     } else if (
 30 |       appDescription.config?.themes?.some((theme: ThemeDefinition) => theme.id === options.content)
 31 |     ) {
 32 |       content = `${options.content}.json`;
 33 |     } else if (
 34 |       appDescription.components?.some(
 35 |         (component: CompoundComponentDef) =>
 36 |           component.name.toLowerCase() === options.content.toLowerCase(),
 37 |       )
 38 |     ) {
 39 |       content = `${options.content}.xmlui`;
 40 |     }
 41 |     return content;
 42 |   }, [appDescription.components, appDescription.config?.themes, options.content]);
 43 | 
 44 |   return (
 45 |     <RadixSelect.Root
 46 |       open={open}
 47 |       onOpenChange={(open) => setOpen(open)}
 48 |       value={options.content}
 49 |       onValueChange={(value) => dispatch(contentChanged(value))}
 50 |     >
 51 |       <RadixSelect.Trigger aria-label="component">
 52 |         <Button themeColor="primary" variant="ghost">
 53 |           <RadixSelect.Value>{selectedValue}</RadixSelect.Value>
 54 |           <RadixSelect.Icon className={selectStyles.SelectIcon}>
 55 |             {open ? <Icon name="chevronup" /> : <Icon name="chevrondown" />}
 56 |           </RadixSelect.Icon>
 57 |         </Button>
 58 |       </RadixSelect.Trigger>
 59 |       <RadixSelect.Portal container={root}>
 60 |         <RadixSelect.Content
 61 |           className={selectStyles.RadixMenuContent}
 62 |           side="bottom"
 63 |           align="start"
 64 |           position="popper"
 65 |         >
 66 |           <RadixSelect.Viewport>
 67 |             <RadixSelect.Group>
 68 |               <SelectItem value="app" key="app">
 69 |                 Main.xmlui
 70 |               </SelectItem>
 71 |             </RadixSelect.Group>
 72 |             {appDescription.config?.themes?.length > 0 && (
 73 |               <RadixSelect.Group>
 74 |                 <RadixSelect.Label className={selectStyles.SelectLabel}>Themes</RadixSelect.Label>
 75 |                 {appDescription.config?.themes?.map((theme: ThemeDefinition, index: number) => (
 76 |                   <SelectItem value={theme.id} key={index}>
 77 |                     {`${theme.id}.json`}
 78 |                   </SelectItem>
 79 |                 ))}
 80 |               </RadixSelect.Group>
 81 |             )}
 82 |             {appDescription.components?.length > 0 && (
 83 |               <RadixSelect.Group>
 84 |                 <RadixSelect.Label className={selectStyles.SelectLabel}>
 85 |                   Components
 86 |                 </RadixSelect.Label>
 87 |                 {appDescription.components?.map(
 88 |                   (component: CompoundComponentDef, index: number) => (
 89 |                     <SelectItem value={component.name} key={index}>
 90 |                       {`${component.name}.xmlui`}
 91 |                     </SelectItem>
 92 |                   ),
 93 |                 )}
 94 |               </RadixSelect.Group>
 95 |             )}
 96 |           </RadixSelect.Viewport>
 97 |         </RadixSelect.Content>
 98 |       </RadixSelect.Portal>
 99 |     </RadixSelect.Root>
100 |   );
101 | };
102 | 
```

--------------------------------------------------------------------------------
/xmlui/tests/language-server/mockData.ts:
--------------------------------------------------------------------------------

```typescript
  1 | import { MetadataProvider, ComponentMetadataCollection } from "../../src/language-server/services/common/metadata-utils";
  2 | 
  3 | export const mockMetadata = {
  4 |   "Stack": {
  5 |     "description": "`Stack` is a layout container displaying children in a horizontal or vertical stack.",
  6 |     "props": {
  7 |       "gap": {
  8 |         "description": "Optional size value indicating the gap between child elements.",
  9 |         "valueType": "string",
 10 |         "defaultValue": "$gap-normal"
 11 |       },
 12 |       "reverse": {
 13 |         "description": "Optional boolean property to reverse the order of child elements.",
 14 |         "valueType": "boolean",
 15 |         "defaultValue": false
 16 |       },
 17 |       "wrapContent": {
 18 |         "description": "Optional boolean which wraps the content if set to true and the available space is not big enough. Works only with horizontal orientations.",
 19 |         "valueType": "boolean",
 20 |         "defaultValue": false
 21 |       },
 22 |       "orientation": {
 23 |         "description": "An optional property that governs the Stack's orientation (whether the Stack lays out its children in a row or a column).",
 24 |         "availableValues": [
 25 |           "horizontal",
 26 |           "vertical"
 27 |         ],
 28 |         "valueType": "string",
 29 |         "defaultValue": "vertical"
 30 |       },
 31 |       "horizontalAlignment": {
 32 |         "description": "Manages the horizontal content alignment for each child element in the Stack.",
 33 |         "availableValues": [
 34 |           "start",
 35 |           "center",
 36 |           "end"
 37 |         ],
 38 |         "valueType": "string",
 39 |         "defaultValue": "start"
 40 |       },
 41 |       "verticalAlignment": {
 42 |         "description": "Manages the vertical content alignment for each child element in the Stack.",
 43 |         "availableValues": [
 44 |           "start",
 45 |           "center",
 46 |           "end"
 47 |         ],
 48 |         "valueType": "string",
 49 |         "defaultValue": "start"
 50 |       },
 51 |       "hoverContainer": {
 52 |         "description": "Reserved for future use",
 53 |         "isInternal": true
 54 |       },
 55 |       "visibleOnHover": {
 56 |         "description": "Reserved for future use",
 57 |         "isInternal": true
 58 |       }
 59 |     },
 60 |     "events": {
 61 |       "click": {
 62 |         "description": "This event is triggered when the Stack is clicked."
 63 |       },
 64 |       "mounted": {
 65 |         "description": "Reserved for future use",
 66 |         "isInternal": true
 67 |       }
 68 |     },
 69 |   },
 70 |   "Button": {
 71 |     "description": "Button is an interactive element that triggers an action when clicked.",
 72 |     "status": "stable",
 73 |     "props": {
 74 |       "label": {
 75 |         "description": "This property is an optional string to set a label for the Button. If no label is specified and an icon is set, the Button will modify its styling to look like a small icon button. When the Button has nested children, it will display them and ignore the value of the `label` prop.",
 76 |         "type": "string"
 77 |       },
 78 |       "variant": {
 79 |         "description": "The button variant determines the level of emphasis the button should possess.",
 80 |         "isRequired": false,
 81 |         "type": "string",
 82 |         "availableValues": [
 83 |           {
 84 |             "value": "solid",
 85 |             "description": "A button with a border and a filled background."
 86 |           },
 87 |           {
 88 |             "value": "outlined",
 89 |             "description": "The button is displayed with a border and a transparent background."
 90 |           },
 91 |           {
 92 |             "value": "ghost",
 93 |             "description": "A button with no border and fill. Only the label is visible; the background is colored when hovered or clicked."
 94 |           }
 95 |         ],
 96 |         "defaultValue": "solid"
 97 |       },
 98 |     },
 99 |     "events": {
100 |       "click": {
101 |         "description": "This event is triggered when the Button is clicked."
102 |       },
103 |     },
104 |   },
105 | }
106 | 
107 | export const mockMetadataProvider = new MetadataProvider(mockMetadata as ComponentMetadataCollection);
108 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/TableOfContents/TableOfContentsNative.tsx:
--------------------------------------------------------------------------------

```typescript
  1 | import {
  2 |   type CSSProperties,
  3 |   type ForwardedRef,
  4 |   forwardRef,
  5 |   useEffect,
  6 |   useRef,
  7 |   useState,
  8 | } from "react";
  9 | import { Link } from "@remix-run/react";
 10 | import scrollIntoView from "scroll-into-view-if-needed";
 11 | import { composeRefs } from "@radix-ui/react-compose-refs";
 12 | import classnames from "classnames";
 13 | 
 14 | import styles from "./TableOfContents.module.scss";
 15 | import { useTableOfContents } from "../../components-core/TableOfContentsContext";
 16 | import { useIsomorphicLayoutEffect } from "../../components-core/utils/hooks";
 17 | 
 18 | type Props = {
 19 |   style?: CSSProperties;
 20 |   className?: string;
 21 |   smoothScrolling?: boolean;
 22 |   maxHeadingLevel?: number;
 23 |   omitH1?: boolean;
 24 | };
 25 | 
 26 | export const defaultProps = {
 27 |   smoothScrolling: false,
 28 |   maxHeadingLevel: 6,
 29 |   omitH1: false,
 30 | };
 31 | 
 32 | export const TableOfContents = forwardRef(function TableOfContents(
 33 |   {
 34 |     style,
 35 |     smoothScrolling = defaultProps.smoothScrolling,
 36 |     maxHeadingLevel = defaultProps.maxHeadingLevel,
 37 |     omitH1 = defaultProps.omitH1,
 38 |     className,
 39 |     ...rest
 40 |   }: Props,
 41 |   forwardedRef: ForwardedRef<HTMLDivElement>,
 42 | ) {
 43 |   const tocRef = useRef<HTMLDivElement>(null);
 44 |   const {
 45 |     headings,
 46 |     scrollToAnchor,
 47 |     subscribeToActiveAnchorChange,
 48 |     activeAnchorId: initialActiveAnchorId,
 49 |   } = useTableOfContents();
 50 |   const [activeAnchorId, setActiveId] = useState(initialActiveAnchorId);
 51 | 
 52 |   useIsomorphicLayoutEffect(() => {
 53 |     return subscribeToActiveAnchorChange((id) => {
 54 |       const foundHeading = headings.find((heading) => heading.id === id);
 55 |       if (foundHeading?.level <= maxHeadingLevel) {
 56 |         setActiveId(id);
 57 |       }
 58 |     });
 59 |   }, [headings, maxHeadingLevel, subscribeToActiveAnchorChange]);
 60 | 
 61 |   const ref = forwardedRef ? composeRefs(tocRef, forwardedRef) : tocRef;
 62 | 
 63 |   useEffect(() => {
 64 |     if (activeAnchorId && tocRef?.current) {
 65 |       const activeAnchor = tocRef.current.querySelector(`#${activeAnchorId}`);
 66 |       if (activeAnchor) {
 67 |         scrollIntoView(activeAnchor, {
 68 |           block: "center",
 69 |           inline: "center",
 70 |           behavior: "smooth",
 71 |           scrollMode: "always",
 72 |           boundary: tocRef.current,
 73 |         });
 74 |       }
 75 |     }
 76 |   }, [activeAnchorId, headings]);
 77 | 
 78 |   return (
 79 |     <nav
 80 |       {...rest}
 81 |       aria-label="Table of Contents"
 82 |       className={classnames(styles.nav, className)}
 83 |       ref={ref}
 84 |       style={style}
 85 |     >
 86 |       <ul className={styles.list}>
 87 |         {headings.map((value) => {
 88 |           if (value.level <= maxHeadingLevel && (!omitH1 || value.level !== 1)) {
 89 |             return (
 90 |               <li
 91 |                 key={value.id}
 92 |                 className={classnames(styles.listItem, {
 93 |                   [styles.active]: value.id === activeAnchorId,
 94 |                 })}
 95 |               >
 96 |                 <Link
 97 |                   aria-current={value.id === activeAnchorId ? "page" : "false"}
 98 |                   className={classnames(styles.link, {
 99 |                     [styles.head_1]: value.level === 1,
100 |                     [styles.head_2]: value.level === 2,
101 |                     [styles.head_3]: value.level === 3,
102 |                     [styles.head_4]: value.level === 4,
103 |                     [styles.head_5]: value.level === 5,
104 |                     [styles.head_6]: value.level === 6,
105 |                   })}
106 |                   to={`#${value.id}`}
107 |                   onClick={(event) => {
108 |                     // cmd/ctrl + click - open in new tab, don't prevent that
109 |                     if (!event.ctrlKey && !event.metaKey && !event.metaKey) {
110 |                       event.preventDefault();
111 |                     }
112 |                     scrollToAnchor(value.id, smoothScrolling);
113 |                   }}
114 |                   id={value.id}
115 |                 >
116 |                   {value.text}
117 |                 </Link>
118 |               </li>
119 |             );
120 |           }
121 |           return null;
122 |         })}
123 |       </ul>
124 |     </nav>
125 |   );
126 | });
127 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Switch/Switch.md:
--------------------------------------------------------------------------------

```markdown
  1 | %-DESC-START
  2 | 
  3 | ## Switch Values
  4 | 
  5 | The `initialValue` and `value` properties of the switch are transformed to a Boolean value to display the on (`true`) or off (`false`) state with this logic:
  6 | - `null` and `undefined` go to `false`.
  7 | - If the property is Boolean, the property value is used as is.
  8 | - If it is a number, `NaN` and `0` result in `false`; other values represent `true`.
  9 | - If the property is a string, the empty string and the literal "false" string result in `false`; others result in `true`.
 10 | - The empty array value goes to `false`; other array values result in `true`.
 11 | - Object values with no properties result in `false`; other values represent `true`.
 12 | 
 13 | %-DESC-END
 14 | 
 15 | %-PROP-START enabled
 16 | 
 17 | This boolean property indicates whether the checkbox responds to user events (i.e. clicks);
 18 | it is `true` by default.
 19 | 
 20 | ```xmlui-pg copy {4-5, 9-10} display name="Example: enabled"
 21 | <App>
 22 |   Enabled switches:
 23 |   <HStack>
 24 |     <Switch initialValue="true" enabled="true" />
 25 |     <Switch initialValue="false" enabled="true" />
 26 |   </HStack>
 27 |   Disabled switches:
 28 |   <HStack>
 29 |     <Switch initialValue="true" enabled="false" />
 30 |     <Switch initilaValue="false" enabled="false" />
 31 |   </HStack>
 32 | </App>
 33 | ```
 34 | 
 35 | %-PROP-END
 36 | 
 37 | %-PROP-START label
 38 | 
 39 | This property sets the label of the component.
 40 | 
 41 | ```xmlui-pg copy display name="Example: label"
 42 | <App>
 43 |   <Switch label="Example label" initialValue="true" />
 44 |   <Switch label="Another label" intialValue="false" />
 45 | </App>
 46 | ```
 47 | 
 48 | %-PROP-END
 49 | 
 50 | %-PROP-START labelPosition
 51 | 
 52 | ```xmlui-pg copy display name="Example: labelPosition"
 53 | <App>
 54 |   <Switch label="Top label" labelPosition="top" initialValue="true" />
 55 |   <Switch label="End label" labelPosition="end" initialValue="true" />
 56 |   <Switch label="Bottom label" labelPosition="bottom" initialValue="true" />
 57 |   <Switch label="Start label" labelPosition="start" initialValue="true" />
 58 | </App>
 59 | ```
 60 | 
 61 | %-PROP-END
 62 | 
 63 | %-PROP-START readOnly
 64 | 
 65 | If true, the value of the component cannot be modified.
 66 | 
 67 | ```xmlui-pg copy display name="Example: readOnly"
 68 | <App>
 69 |   <Switch readOnly="true" label="Checked" initialValue="true" />
 70 |   <Switch readOnly="true" label="Unchecked" intialValue="false" />
 71 | </App>
 72 | ```
 73 | 
 74 | %-PROP-END
 75 | 
 76 | %-API-START setValue
 77 | 
 78 | ```xmlui-pg copy {10,13,15} display name="Example: value and setValue"
 79 | <App var.changes="">
 80 |   <Switch
 81 |     id="mySwitch"
 82 |     readOnly="true"
 83 |     label="This switch can be set only programmatically"
 84 |     onDidChange="changes += '+'" />
 85 |   <HStack>
 86 |     <Button
 87 |       label="Check"
 88 |       onClick="mySwitch.setValue(true)" />
 89 |     <Button
 90 |       label="Uncheck"
 91 |       onClick="mySwitch.setValue(false)" />
 92 |   </HStack>
 93 |   <Text>The switch is {checkbox.value ? "checked" : "unchecked"}</Text>
 94 |   <Text value="Changes: {changes}" />
 95 | </App>
 96 | ```
 97 | 
 98 | %-API-END
 99 | 
100 | %-EVENT-START didChange
101 | 
102 | This event is triggered when the `Switch` is toggled due to user interaction.
103 | A read-only switch never fires this event, and it won't fire if the switch's value is set programmatically.
104 | 
105 | ```xmlui-pg copy display name="Example: didChange"
106 | <App verticalAlignment="center" var.changes="">
107 |   <Switch label="Changeable" onDidChange="changes += '+'" />
108 |   <Switch label="Readonly" readOnly="true" onDidChange="changes += '-'" />
109 |   <Text value="Changes: {changes}" />
110 | </App>
111 | ```
112 | 
113 | %-EVENT-END
114 | 
115 | %-EVENT-START gotFocus
116 | 
117 | This event is triggered when the `Switch` receives focus.
118 | 
119 | Click the `Switch` in the example demo to change the label text. Note how clicking elsewhere resets the text to the original.
120 | 
121 | ```xmlui-pg copy {4,5} display name="Example: gotFocus"
122 | <App var.focused="{false}" verticalAlignment="center">
123 |   <Switch
124 |     value="true"
125 |     onGotFocus="focused = true"
126 |     onLostFocus="focused = false"
127 |   />
128 |   <Text value="{focused === true ? 'I am focused!' : 'I have lost the focus!'}" />
129 | </App>
130 | ```
131 | 
132 | %-EVENT-END
133 | 
134 | This event is triggered when the `Switch` loses focus.
135 | 
136 | (See the example above)
137 | 
138 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Tree/TreeComponent.module.scss:
--------------------------------------------------------------------------------

```scss
  1 | @use "../../components-core/theming/themes" as t;
  2 | 
  3 | // --- This code snippet is required to collect the theme variables used in this module
  4 | $themeVars: ();
  5 | @function createThemeVar($componentVariable) {
  6 |   $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  7 |   @return t.getThemeVar($themeVars, $componentVariable);
  8 | }
  9 | 
 10 | $component: "Tree";
 11 | 
 12 | // Tree component theme variables
 13 | $backgroundColor-Tree-row--selected: createThemeVar("backgroundColor-#{$component}-row--selected");
 14 | $backgroundColor-Tree-row--hover: createThemeVar("backgroundColor-#{$component}-row--hover");
 15 | $textColor-Tree: createThemeVar("textColor-#{$component}");
 16 | $textColor-Tree--selected: createThemeVar("textColor-#{$component}--selected");
 17 | $textColor-Tree--hover: createThemeVar("textColor-#{$component}--hover");
 18 | $borderColor-Tree-row--focus: createThemeVar("borderColor-#{$component}-row--focus");
 19 | $outlineColor-Tree--focus: createThemeVar("outlineColor-#{$component}--focus");
 20 | $outlineWidth-Tree--focus: createThemeVar("outlineWidth-#{$component}--focus");
 21 | $outlineStyle-Tree--focus: createThemeVar("outlineStyle-#{$component}--focus");
 22 | $outlineOffset-Tree--focus: createThemeVar("outlineOffset-#{$component}--focus");
 23 | 
 24 | @layer components {
 25 |   .wrapper {
 26 |     flex: 1;
 27 |     // Add small padding to provide breathing room for focus indicators
 28 |     padding: 1px 2px;
 29 |     // Remove focus outline since individual tree items handle focus styling
 30 |     outline: none;
 31 |     
 32 |     &:focus {
 33 |       outline: none;
 34 |     }
 35 |   }
 36 | 
 37 |   .rowWrapper {
 38 |     display: flex;
 39 |     flex-direction: row;
 40 |     align-items: center;
 41 |     flex: 1;
 42 |     min-width: 0;
 43 |     height: 100%;
 44 |     color: $textColor-Tree;
 45 |     position: relative;
 46 |     // Add small margin to ensure focus ring has space
 47 |     margin: 0 1px;
 48 |     // Use border-radius to make focus ring more polished
 49 |     border-radius: 2px;
 50 |     transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 51 |     
 52 |     // Remove browser default focus outline since we handle focus styling with CSS classes
 53 |     outline: none;
 54 |     
 55 |     &:focus {
 56 |       outline: none;
 57 |     }
 58 | 
 59 |     &.selected {
 60 |       background-color: $backgroundColor-Tree-row--selected;
 61 |       color: $textColor-Tree--selected;
 62 |       
 63 |       &:focus-visible {
 64 |         // Use inset box-shadow to stay within bounds
 65 |         box-shadow: inset 0 0 0 2px $outlineColor-Tree--focus;
 66 |       }
 67 |     }
 68 | 
 69 |     &.focused {
 70 |       // Use inset box-shadow to stay within row bounds and avoid clipping
 71 |       box-shadow: inset 0 0 0 2px $outlineColor-Tree--focus;
 72 |     }
 73 | 
 74 |     &:hover:not(.selected) {
 75 |       background-color: $backgroundColor-Tree-row--hover;
 76 |       color: $textColor-Tree--hover;
 77 |     }
 78 | 
 79 |     &:hover {
 80 |       .addButton {
 81 |         opacity: 1;
 82 |       }
 83 |     }
 84 |   }
 85 | 
 86 |   .gutter {
 87 |     flex-direction: row;
 88 |     flex-shrink: 0;
 89 |     height: 100%;
 90 |     display: flex;
 91 |     align-items: center;
 92 |   }
 93 | 
 94 |   .toggleWrapper {
 95 |     width: 40px;
 96 |     height: 24px;
 97 |     flex-shrink: 0;
 98 |     display: flex;
 99 |     align-items: center;
100 |     justify-content: center;
101 |     cursor: pointer;
102 | 
103 |     &.hidden {
104 |       visibility: hidden;
105 |       pointer-events: none;
106 |     }
107 |   }
108 | 
109 |   .toggleIcon {
110 |     transition: transform 0.2s ease-in-out;
111 |     color: currentColor;
112 |     display: flex;
113 |     align-items: center;
114 |     justify-content: center;
115 |   }
116 | 
117 |   .depthPlaceholder {
118 |     flex-shrink: 0;
119 |   }
120 | 
121 |   .labelWrapper{
122 |     white-space: nowrap;
123 |     flex: 1;
124 |     display: flex;
125 |     flex-direction: row;
126 |     align-items: center;
127 |     height: 100%;
128 |     flex-shrink: 0;
129 |     min-width: fit-content;
130 |     user-select: none;
131 |   }
132 | 
133 |   .addButton {
134 |     height: 100%;
135 |     width: 32px;
136 |     background-color: transparent;
137 |     border: 0;
138 |     cursor: pointer;
139 |     opacity: 0;
140 |     flex-shrink: 0;
141 |   }
142 | }
143 | 
144 | // --- We export the theme variables to add them to the component renderer
145 | :export {
146 |   themeVars: t.json-stringify($themeVars);
147 | }
148 | 
149 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Charts/BarChart/BarChart.md:
--------------------------------------------------------------------------------

```markdown
  1 | %-DESC-START
  2 | 
  3 | The BarChart component accommodates the size of its parent unless you set it explicitly:
  4 | 
  5 | ```xmlui-pg copy display height="300px" name="Example: dimension determined by the parent" /Card height="240px" width="75%"/
  6 | <Card height="240px" width="75%">
  7 |   <BarChart
  8 |     orientation="horizontal"
  9 |     data="{[
 10 |         { 'sprint': 'Sprint 1', 'A': 44 },
 11 |         { 'sprint': 'Sprint 2', 'A': 32 },
 12 |         { 'sprint': 'Sprint 3', 'A': 48 },
 13 |         { 'sprint': 'Sprint 4', 'A': 72 }
 14 |        ]}"
 15 |     yKeys="{['A']}"
 16 |     xKey="sprint"
 17 |   />
 18 | </Card>
 19 | ```
 20 | 
 21 | ```xmlui-pg copy display height="300px" name="Example: dimension overwritten by BarChart" /height="240px"/ /height="200px"/
 22 | <Card height="240px">
 23 |   <BarChart
 24 |     orientation="horizontal"
 25 |     height="200px"
 26 |     data="{[
 27 |         { 'sprint': 'Sprint 1', 'A': 44 },
 28 |         { 'sprint': 'Sprint 2', 'A': 32 },
 29 |         { 'sprint': 'Sprint 3', 'A': 48 },
 30 |         { 'sprint': 'Sprint 4', 'A': 72 }
 31 |        ]}"
 32 |     yKeys="{['A']}"
 33 |     xKey="sprint"
 34 |   />
 35 | </Card>
 36 | ```
 37 | 
 38 | 
 39 | **Key features:**
 40 | - **Flexible orientation**: Choose horizontal or vertical bar layouts
 41 | - **Multiple data series**: Display several metrics on the same chart with different colored bars
 42 | - **Stacked vs grouped**: Stack bars on top of each other or place them side by side
 43 | - **Custom formatting**: Use `tickFormatter` to format axis labels and [`LabelList`](/components/LabelList) for data labels
 44 | 
 45 | %-DESC-END
 46 | 
 47 | %-PROP-START tickFormatterY
 48 | 
 49 | ```xmlui-pg copy display height="320px" name="Example: tickFormatterY" /tickFormatterY/
 50 | <App>
 51 |   <BarChart
 52 |     orientation="horizontal"
 53 |     height="240px"
 54 |     data="{[
 55 |         { 'sprint': 'Sprint 1', 'A': 44 },
 56 |         { 'sprint': 'Sprint 2', 'A': 32 },
 57 |         { 'sprint': 'Sprint 3', 'A': 48 },
 58 |         { 'sprint': 'Sprint 4', 'A': 72 }
 59 |        ]}"
 60 |     yKeys="{['A']}"
 61 |     xKey="sprint"
 62 |     tickFormatterY="{(value) => '$' + value}"
 63 |   />
 64 | </App>
 65 | ```
 66 | 
 67 | %-PROP-END
 68 | 
 69 | 
 70 | %-PROP-START tickFormatterX
 71 | 
 72 | ```xmlui-pg copy display height="320px" name="Example: tickFormatterX" /tickFormatterX/
 73 | <App>
 74 |   <BarChart
 75 |     orientation="horizontal"
 76 |     height="240px"
 77 |     data="{[
 78 |         { 'sprint': 'Sprint 1', 'A': 44 },
 79 |         { 'sprint': 'Sprint 2', 'A': 32 },
 80 |         { 'sprint': 'Sprint 3', 'A': 48 },
 81 |         { 'sprint': 'Sprint 4', 'A': 72 }
 82 |        ]}"
 83 |     yKeys="{['A']}"
 84 |     xKey="sprint"
 85 |     tickFormatterX="{(value) => '(' + value + ')'}"
 86 |   />
 87 | </App>
 88 | ```
 89 | 
 90 | %-PROP-END
 91 | 
 92 | %-PROP-START tooltipTemplate
 93 | 
 94 | ```xmlui-pg copy display height="320px" name="Example: tooltipTemplate" /tooltipTemplate/
 95 | <App>
 96 |   <BarChart
 97 |     orientation="horizontal"
 98 |     height="240px"
 99 |     data="{[
100 |         { 'sprint': 'Sprint 1', 'A': 44, 'B': 28 },
101 |         { 'sprint': 'Sprint 2', 'A': 32, 'B': 41 },
102 |         { 'sprint': 'Sprint 3', 'A': 48, 'B': 35 },
103 |         { 'sprint': 'Sprint 4', 'A': 72, 'B': 58 }
104 |        ]}"
105 |     yKeys="{['A', 'B']}"
106 |     xKey="sprint"
107 |   >
108 |     <property name="tooltipTemplate">
109 |         <VStack backgroundColor='white' padding="$space-2">
110 |           <Text fontWeight='bold'>{$tooltip.label}</Text>
111 |           <Items data="{$tooltip.payload}">
112 |               <HStack gap="$space-2" verticalAlignment="center">
113 |                   <Stack
114 |                       width="8px"
115 |                       height="8px"
116 |                       backgroundColor="{$item.color}" />
117 |                   <Text>{$item.label}: {$item.value}</Text>
118 |               </HStack>
119 |           </Items>
120 |         </VStack>
121 |     </property>
122 |   </BarChart>
123 | </App>
124 | ```
125 | 
126 | The `tooltipTemplate` prop allows you to customize the appearance and content of chart tooltips. The template receives a `$tooltip` context variable containing:
127 | 
128 | - `$tooltip.label`: The label for the data point (typically the yKey value)
129 | - `$tooltip.payload`: An object containing all data values for the hovered point
130 | - `$tooltip.active`: Boolean indicating if the tooltip is currently active
131 | 
132 | %-PROP-END
133 | 
```

--------------------------------------------------------------------------------
/xmlui/tests/parsers/markdown/parse-binding-expression.test.ts:
--------------------------------------------------------------------------------

```typescript
  1 | import { describe, expect, it } from "vitest";
  2 | import { parseBindingExpression } from "../../../src/components/Markdown/parse-binding-expr";
  3 | 
  4 | describe("parseBindingExpression - Safari Compatibility", () => {
  5 |   // Simple mock value extractor for testing basic functionality
  6 |   const mockValueExtractor = ((expr: any) => `EXTRACTED(${expr})`) as any;
  7 | 
  8 |   it("should handle empty binding expressions", () => {
  9 |     const input = "Some text @{} more text";
 10 |     const result = parseBindingExpression(input, mockValueExtractor);
 11 | 
 12 |     // Should replace empty binding with empty string
 13 |     expect(result).toBe("Some text  more text");
 14 |   });
 15 | 
 16 |   it("should handle binding expressions with content", () => {
 17 |     const input = "Hello @{name}!";
 18 |     const result = parseBindingExpression(input, mockValueExtractor);
 19 | 
 20 |     // Should extract and replace binding expressions with content
 21 |     expect(result).toBe("Hello EXTRACTED({name})!");
 22 |   });
 23 | 
 24 |   it("should handle escaped binding expressions", () => {
 25 |     const input = "This is \\@{} not a binding";
 26 |     const result = parseBindingExpression(input, mockValueExtractor);
 27 | 
 28 |     // Should preserve escaped bindings
 29 |     expect(result).toBe("This is \\@{} not a binding");
 30 |   });
 31 | 
 32 |   it("should handle multiple empty bindings", () => {
 33 |     const input = "Text @{} middle @{} end";
 34 |     const result = parseBindingExpression(input, mockValueExtractor);
 35 | 
 36 |     // Should replace both empty bindings
 37 |     expect(result).toBe("Text  middle  end");
 38 |   });
 39 | 
 40 |   it("should handle mixed empty and content bindings", () => {
 41 |     const input = "Start @{} @{value} @{} end";
 42 |     const result = parseBindingExpression(input, mockValueExtractor);
 43 | 
 44 |     // Should only replace empty bindings and extract content bindings
 45 |     expect(result).toBe("Start  EXTRACTED({value})  end");
 46 |   });
 47 | 
 48 |   it("should handle bindings at start and end", () => {
 49 |     const input = "@{} middle text @{}";
 50 |     const result = parseBindingExpression(input, mockValueExtractor);
 51 | 
 52 |     // Should handle edge cases
 53 |     expect(result).toBe(" middle text ");
 54 |   });
 55 | 
 56 |   it("should handle whitespace in empty bindings", () => {
 57 |     const input = "Text @{   } more text";
 58 |     const result = parseBindingExpression(input, mockValueExtractor);
 59 | 
 60 |     // Should replace whitespace-only bindings
 61 |     expect(result).toBe("Text  more text");
 62 |   });
 63 | 
 64 |   it("should not break with complex text", () => {
 65 |     const input = "Complex @{} text with @{variable} and \\@{escaped} and @{} end";
 66 |     const result = parseBindingExpression(input, mockValueExtractor);
 67 | 
 68 |     // Should handle complex scenarios correctly
 69 |     expect(result).toBe("Complex  text with EXTRACTED({variable}) and \\@{escaped} and  end");
 70 |   });
 71 | 
 72 |   it("should handle Safari-incompatible regex patterns", () => {
 73 |     // This is the key test to ensure our Safari fix works
 74 |     const input = "Before @{} after @{content} final @{}";
 75 | 
 76 |     // This should not throw "Invalid regular expression" on Safari
 77 |     expect(() => {
 78 |       parseBindingExpression(input, mockValueExtractor);
 79 |     }).not.toThrow();
 80 | 
 81 |     const result = parseBindingExpression(input, mockValueExtractor);
 82 |     expect(result).toBe("Before  after EXTRACTED({content}) final ");
 83 |   });
 84 | 
 85 |   it("should preserve escaped content bindings", () => {
 86 |     const input = "Escaped \\@{name} binding";
 87 |     const result = parseBindingExpression(input, mockValueExtractor);
 88 |     expect(result).toBe("Escaped \\@{name} binding");
 89 |   });
 90 | 
 91 |   it("should handle nested braces", () => {
 92 |     const input = "Nested @{outer{inner}} binding";
 93 |     const result = parseBindingExpression(input, mockValueExtractor);
 94 |     expect(result).toBe("Nested EXTRACTED({outer{inner}}) binding");
 95 |   });
 96 | 
 97 |   it("should handle adjacent bindings", () => {
 98 |     const input = "@{a}@{b}@{}";
 99 |     const result = parseBindingExpression(input, mockValueExtractor);
100 |     expect(result).toBe("EXTRACTED({a})EXTRACTED({b})");
101 |   });
102 | });
103 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/NavGroup/NavGroup.tsx:
--------------------------------------------------------------------------------

```typescript
 1 | import styles from "./NavGroup.module.scss";
 2 | import navLinkStyles from "../NavLink/NavLink.module.scss";
 3 | 
 4 | import { createComponentRenderer } from "../../components-core/renderers";
 5 | import { parseScssVar } from "../../components-core/theming/themeVars";
 6 | import { Icon } from "../Icon/IconNative";
 7 | import { createMetadata, d, dEnabled, dLabel } from "../metadata-helpers";
 8 | import { defaultProps, NavGroup } from "./NavGroupNative";
 9 | 
10 | const COMP = "NavGroup";
11 | 
12 | export const NavGroupMd = createMetadata({
13 |   status: "stable",
14 |   description:
15 |     "`NavGroup` creates collapsible containers for organizing related navigation " +
16 |     "items into hierarchical menu structures. It groups `NavLink` components and " +
17 |     "other `NavGroup` components, providing expandable submenus with customizable " +
18 |     "icons and states.",
19 |   props: {
20 |     label: dLabel(),
21 |     initiallyExpanded: d(
22 |       "This property defines whether the group is initially expanded or collapsed. If not " +
23 |         "defined, the group is collapsed by default.",
24 |     ),
25 |     enabled: dEnabled(),
26 |     to: {
27 |       description: `This property defines an optional navigation link.`,
28 |       valueType: "string",
29 |     },
30 |     icon: {
31 |       description: `This property defines an optional icon to display along with the \`${COMP}\` label.`,
32 |       valueType: "string",
33 |     },
34 |     iconHorizontalExpanded: {
35 |       description:
36 |         "Set a custom icon to display when the navigation menu is expanded, " +
37 |         "is in a **horizontal** app layout, and is in a navigation submenu.",
38 |       valueType: "string",
39 |       defaultValue: defaultProps.iconHorizontalExpanded,
40 |     },
41 |     iconVerticalExpanded: {
42 |       description:
43 |         "Set a custom icon to display when the navigation menu is expanded, " +
44 |         "is in a **vertical** app layout, or is in a **horizontal** layout and is the top-level navigation item in the menu.",
45 |       valueType: "string",
46 |       defaultValue: defaultProps.iconVerticalExpanded,
47 |     },
48 |     iconHorizontalCollapsed: {
49 |       description:
50 |         "Set a custom icon to display when the navigation menu is collapsed, " +
51 |         "is in a **horizontal** app layout, and is in a navigation submenu.",
52 |       valueType: "string",
53 |       defaultValue: defaultProps.iconHorizontalCollapsed,
54 |     },
55 |     iconVerticalCollapsed: {
56 |       description:
57 |         "Set a custom icon to display when the navigation menu is collapsed, " +
58 |         "is in a **vertical** app layout, or is in a **horizontal** layout and is the top-level navigation item in the menu.",
59 |       valueType: "string",
60 |       defaultValue: defaultProps.iconVerticalCollapsed,
61 |     },
62 |   },
63 |   themeVars: parseScssVar(styles.themeVars),
64 |   defaultThemeVars: {
65 |     [`backgroundColor-dropdown-${COMP}`]: "$backgroundColor-primary",
66 |     [`borderRadius-dropdown-${COMP}`]: "$borderRadius",
67 |     [`boxShadow-dropdown-${COMP}`]: "$boxShadow-spread",
68 |   },
69 | });
70 | 
71 | export const navGroupComponentRenderer = createComponentRenderer(
72 |   COMP,
73 |   NavGroupMd,
74 |   ({ node, extractValue, renderChild }) => {
75 |     return (
76 |       <NavGroup
77 |         label={extractValue.asDisplayText(node.props.label)}
78 |         disabled={!extractValue.asOptionalBoolean(node.props.enabled ?? true)}
79 |         to={extractValue.asOptionalString(node.props.to)}
80 |         icon={<Icon name={extractValue.asString(node.props.icon)} className={navLinkStyles.icon} />}
81 |         node={node}
82 |         initiallyExpanded={extractValue.asOptionalBoolean(node.props.initiallyExpanded)}
83 |         renderChild={renderChild}
84 |         iconHorizontalExpanded={extractValue.asOptionalString(node.props.iconHorizontalExpanded)}
85 |         iconVerticalExpanded={extractValue.asOptionalString(node.props.iconVerticalExpanded)}
86 |         iconHorizontalCollapsed={extractValue.asOptionalString(node.props.iconHorizontalCollapsed)}
87 |         iconVerticalCollapsed={extractValue.asOptionalString(node.props.iconVerticalCollapsed)}
88 |       />
89 |     );
90 |   },
91 | );
92 | 
```

--------------------------------------------------------------------------------
/xmlui/tests/parsers/xmlui/transform.regression.test.ts:
--------------------------------------------------------------------------------

```typescript
  1 | import { describe, expect, assert, it } from "vitest";
  2 | import type { ComponentDef, CompoundComponentDef } from "../../../src/abstractions/ComponentDefs";
  3 | import { transformSource } from "./xmlui";
  4 | import { ParserError } from "../../../src/parsers/xmlui-parser";
  5 | 
  6 | describe("Xmlui transform - regression", () => {
  7 |   it("prop with multiple component #1", () => {
  8 |     const cd = transformSource(`
  9 |     <Table width="50%">
 10 |       <property name="items">
 11 |         <DataSource url="https://api.spacexdata.com/v3/rockets"/>
 12 |       </property>
 13 |       <Column size="140">
 14 |           <property name="template">
 15 |             <Image height="100px" fit="cover" src="{$item.flickr_images[0]}"/>
 16 |           </property>
 17 |       </Column>
 18 |       <Column accessor="key" header="Header"/>
 19 |     </Table>
 20 |     `) as ComponentDef;
 21 |     expect(cd.type).equal("Table");
 22 |   });
 23 | 
 24 |   it("Element with attribute comment #1", () => {
 25 |     const cd = transformSource(`
 26 |     <Table width="50%" <!-- height="100%" --> >
 27 |       <property name="items">
 28 |         <DataSource url="https://api.spacexdata.com/v3/rockets"/>
 29 |       </property>
 30 |       <Column size="140">
 31 |         <property name="template">
 32 |           <Image height="100px" fit="cover" src="{$item.flickr_images[0]}"/>
 33 |         </property>
 34 |       </Column>
 35 |       <Column accessor="key" header="Header"/>
 36 |     </Table>
 37 |     `) as ComponentDef;
 38 |     expect(cd.type).equal("Table");
 39 |   });
 40 | 
 41 |   it("Element with attribute comment #2", () => {
 42 |     const cd = transformSource(`
 43 |     <Table <!--width="50%"--> <!-- height="100%" --> >
 44 |       <property name="items">
 45 |         <DataSource url="https://api.spacexdata.com/v3/rockets"/>
 46 |       </property>
 47 |       <Column size="140">
 48 |         <property name="template">
 49 |           <Image height="100px" fit="cover" src="{$item.flickr_images[0]}"/>
 50 |         </property>
 51 |       </Column>
 52 |       <Column accessor="key" header="Header"/>
 53 |     </Table>
 54 |     `) as ComponentDef;
 55 |     expect(cd.type).equal("Table");
 56 |   });
 57 | 
 58 |   it("Element with attribute comment #3", () => {
 59 |     const cd = transformSource(`
 60 |     <Table <!--width="50%"--> height="100%">
 61 |       <property name="items">
 62 |         <DataSource url="https://api.spacexdata.com/v3/rockets"/>
 63 |       </property>
 64 |       <Column size="140">
 65 |         <property name="template">
 66 |           <Image height="100px" fit="cover" src="{$item.flickr_images[0]}"/>
 67 |         </property>
 68 |       </Column>
 69 |       <Column accessor="key" header="Header"/>
 70 |     </Table>
 71 |     `) as ComponentDef;
 72 |     expect(cd.type).equal("Table");
 73 |   });
 74 | 
 75 |   it("Event keeps whitespaces", () => {
 76 |     const cd = transformSource(`
 77 |     <Text><event name="click">
 78 | const a = 1;
 79 | 
 80 | const b = 2;
 81 | </event>
 82 |     </Text>
 83 |     `) as ComponentDef;
 84 |     expect(cd.type).equal("Text");
 85 |     expect((cd.events as any).click.source).toBe("\nconst a = 1;\n\nconst b = 2;\n");
 86 |   });
 87 | 
 88 |   it("method keeps whitespaces", () => {
 89 |     const cd = transformSource(`
 90 |     <Text><method name="myMethod">
 91 | const a = 1;
 92 | 
 93 | const b = 2;
 94 | </method>
 95 |     </Text>
 96 |     `) as ComponentDef;
 97 |     expect(cd.type).equal("Text");
 98 |     expect((cd.api as any).myMethod).toBe("\nconst a = 1;\n\nconst b = 2;\n");
 99 |   });
100 | 
101 |   it("Var removes whitespaces", () => {
102 |     const cd = transformSource(`
103 |     <Text><variable name="myVar">
104 | const a = 1;
105 | 
106 | const b = 2;
107 | </variable>
108 |     </Text>
109 |     `) as ComponentDef;
110 |     expect(cd.type).equal("Text");
111 |     expect(cd.vars!.myVar).toBe(" const a = 1; const b = 2; ");
112 |   });
113 | 
114 |   it("Component with html tag", () => {
115 |     const cd = transformSource(`
116 |     <Component name="MyComp">
117 |       <h1>Heading1 </h1>
118 |     </Component>
119 |     `) as CompoundComponentDef;
120 |     expect(cd.name).toBe("MyComp");
121 |     expect(cd.component.type).toBe("h1");
122 |   });
123 | 
124 |   it("Markup with event error #1", () => {
125 |     try {
126 |       transformSource(`<Button onClick="<" />`) as ComponentDef;
127 |     } catch (e) {
128 |       expect((e as ParserError).code).toBe("W002");
129 |       return;
130 |     }
131 |     assert.fail("Exception expected");
132 |   });
133 | });
134 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Table/react-table-config.d.ts:
--------------------------------------------------------------------------------

```typescript
  1 | import type {
  2 |   UseColumnOrderInstanceProps,
  3 |   UseColumnOrderState,
  4 |   UseExpandedHooks,
  5 |   UseExpandedInstanceProps,
  6 |   UseExpandedOptions,
  7 |   UseExpandedRowProps,
  8 |   UseExpandedState,
  9 |   UseFiltersColumnOptions,
 10 |   UseFiltersColumnProps,
 11 |   UseFiltersInstanceProps,
 12 |   UseFiltersOptions,
 13 |   UseFiltersState,
 14 |   UseGlobalFiltersColumnOptions,
 15 |   UseGlobalFiltersInstanceProps,
 16 |   UseGlobalFiltersOptions,
 17 |   UseGlobalFiltersState,
 18 |   UseGroupByCellProps,
 19 |   UseGroupByColumnOptions,
 20 |   UseGroupByColumnProps,
 21 |   UseGroupByHooks,
 22 |   UseGroupByInstanceProps,
 23 |   UseGroupByOptions,
 24 |   UseGroupByRowProps,
 25 |   UseGroupByState,
 26 |   UsePaginationInstanceProps,
 27 |   UsePaginationOptions,
 28 |   UsePaginationState,
 29 |   UseResizeColumnsColumnOptions,
 30 |   UseResizeColumnsColumnProps,
 31 |   UseResizeColumnsOptions,
 32 |   UseResizeColumnsState,
 33 |   UseRowSelectHooks,
 34 |   UseRowSelectInstanceProps,
 35 |   UseRowSelectOptions,
 36 |   UseRowSelectRowProps,
 37 |   UseRowSelectState,
 38 |   UseRowStateCellProps,
 39 |   UseRowStateInstanceProps,
 40 |   UseRowStateOptions,
 41 |   UseRowStateRowProps,
 42 |   UseRowStateState,
 43 |   UseSortByColumnOptions,
 44 |   UseSortByColumnProps,
 45 |   UseSortByHooks,
 46 |   UseSortByInstanceProps,
 47 |   UseSortByOptions,
 48 |   UseSortByState,
 49 | } from "react-table";
 50 | 
 51 | declare module "react-table" {
 52 |   // take this file as-is, or comment out the sections that don't apply to your plugin configuration
 53 | 
 54 |   export interface TableOptions<
 55 |     D extends Record<string, unknown>
 56 |   > extends UseExpandedOptions<D>,
 57 |       UseFiltersOptions<D>,
 58 |       UseGlobalFiltersOptions<D>,
 59 |       UseGroupByOptions<D>,
 60 |       UsePaginationOptions<D>,
 61 |       UseResizeColumnsOptions<D>,
 62 |       UseRowSelectOptions<D>,
 63 |       UseRowStateOptions<D>,
 64 |       UseSortByOptions<D>,
 65 |       // note that having Record here allows you to add anything to the options, this matches the spirit of the
 66 |       // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
 67 |       // feature set, this is a safe default.
 68 |       Record<string, any> {}
 69 | 
 70 |   export interface Hooks<
 71 |     D extends Record<string, unknown> = Record<string, unknown>
 72 |   > extends UseExpandedHooks<D>,
 73 |       UseGroupByHooks<D>,
 74 |       UseRowSelectHooks<D>,
 75 |       UseSortByHooks<D> {}
 76 | 
 77 |   export interface TableInstance<
 78 |     D extends Record<string, unknown> = Record<string, unknown>
 79 |   > extends UseColumnOrderInstanceProps<D>,
 80 |       UseExpandedInstanceProps<D>,
 81 |       UseFiltersInstanceProps<D>,
 82 |       UseGlobalFiltersInstanceProps<D>,
 83 |       UseGroupByInstanceProps<D>,
 84 |       UsePaginationInstanceProps<D>,
 85 |       UseRowSelectInstanceProps<D>,
 86 |       UseRowStateInstanceProps<D>,
 87 |       UseSortByInstanceProps<D> {}
 88 | 
 89 |   export interface TableState<
 90 |     D extends Record<string, unknown> = Record<string, unknown>
 91 |   > extends UseColumnOrderState<D>,
 92 |       UseExpandedState<D>,
 93 |       UseFiltersState<D>,
 94 |       UseGlobalFiltersState<D>,
 95 |       UseGroupByState<D>,
 96 |       UsePaginationState<D>,
 97 |       UseResizeColumnsState<D>,
 98 |       UseRowSelectState<D>,
 99 |       UseRowStateState<D>,
100 |       UseSortByState<D> {}
101 | 
102 |   export interface ColumnInterface<
103 |     D extends Record<string, unknown> = Record<string, unknown>
104 |   > extends UseFiltersColumnOptions<D>,
105 |       UseGlobalFiltersColumnOptions<D>,
106 |       UseGroupByColumnOptions<D>,
107 |       UseResizeColumnsColumnOptions<D>,
108 |       UseSortByColumnOptions<D> {}
109 | 
110 |   export interface ColumnInstance<
111 |     D extends Record<string, unknown> = Record<string, unknown>
112 |   > extends UseFiltersColumnProps<D>,
113 |       UseGroupByColumnProps<D>,
114 |       UseResizeColumnsColumnProps<D>,
115 |       UseSortByColumnProps<D> {}
116 | 
117 |   export interface Cell<
118 |     D extends Record<string, unknown> = Record<string, unknown>,
119 |     V = any
120 |   > extends UseGroupByCellProps<D>,
121 |       UseRowStateCellProps<D> {}
122 | 
123 |   export interface Row<
124 |     D extends Record<string, unknown> = Record<string, unknown>
125 |   > extends UseExpandedRowProps<D>,
126 |       UseGroupByRowProps<D>,
127 |       UseRowSelectRowProps<D>,
128 |       UseRowStateRowProps<D> {}
129 | }
130 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Heading/Heading.module.scss:
--------------------------------------------------------------------------------

```scss
  1 | @use "../../components-core/theming/themes" as t;
  2 | 
  3 | // --- This code snippet is required to collect the theme variables used in this module
  4 | $themeVars: ();
  5 | @function createThemeVar($componentVariable) {
  6 |   $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  7 |   @return t.getThemeVar($themeVars, $componentVariable);
  8 | }
  9 | 
 10 | $themeVars: t.composeBorderVars($themeVars, "H1");
 11 | $themeVars: t.composePaddingVars($themeVars, "H1");
 12 | $themeVars: t.composeTextVars($themeVars, "H1");
 13 | $themeVars: t.composeBorderVars($themeVars, "H2");
 14 | $themeVars: t.composePaddingVars($themeVars, "H2");
 15 | $themeVars: t.composeTextVars($themeVars, "H2");
 16 | $themeVars: t.composeBorderVars($themeVars, "H3");
 17 | $themeVars: t.composePaddingVars($themeVars, "H3");
 18 | $themeVars: t.composeTextVars($themeVars, "H3");
 19 | $themeVars: t.composeBorderVars($themeVars, "H4");
 20 | $themeVars: t.composePaddingVars($themeVars, "H4");
 21 | $themeVars: t.composeTextVars($themeVars, "H4");
 22 | $themeVars: t.composeBorderVars($themeVars, "H5");
 23 | $themeVars: t.composePaddingVars($themeVars, "H5");
 24 | $themeVars: t.composeTextVars($themeVars, "H5");
 25 | $themeVars: t.composeBorderVars($themeVars, "H6");
 26 | $themeVars: t.composePaddingVars($themeVars, "H6");
 27 | $themeVars: t.composeTextVars($themeVars, "H6");
 28 | $color-anchor-Heading: createThemeVar("color-anchor-Heading");
 29 | $gap-anchor-Heading: createThemeVar("gap-anchor-Heading");
 30 | $textDecorationLine-anchor-Heading: createThemeVar("textDecorationLine-anchor-Heading");
 31 | 
 32 | @mixin heading($level) {
 33 |   @include t.paddingVars($themeVars, $level);
 34 |   @include t.borderVars($themeVars, $level);
 35 |   @include t.textVars($themeVars, $level);
 36 |   color: createThemeVar("Heading:textColor-#{$level}");
 37 |   letter-spacing: createThemeVar("Heading:letterSpacing-#{$level}");
 38 |   font-family: createThemeVar("Heading:fontFamily-#{$level}");
 39 |   font-weight: createThemeVar("Heading:fontWeight-#{$level}");
 40 |   margin-top: createThemeVar("marginTop-#{$level}"); // Intentionally omitting "Heading" inheritance
 41 |   margin-bottom: createThemeVar(
 42 |     "marginBottom-#{$level}"
 43 |   ); // Intentionally omitting "Heading" inheritance
 44 |   text-decoration-line: createThemeVar("Heading:textDecorationLine-#{$level}");
 45 |   text-decoration-color: createThemeVar("Heading:textDecorationColor-#{$level}");
 46 |   text-decoration-style: createThemeVar("Heading:textDecorationStyle-#{$level}");
 47 |   text-decoration-thickness: createThemeVar("Heading:textDecorationThickness-#{$level}");
 48 |   text-underline-offset: createThemeVar("Heading:textUnderlineOffset-#{$level}");
 49 | }
 50 | 
 51 | @layer components{
 52 |   .heading {
 53 |     &.h1 {
 54 |       @include heading("H1");
 55 |     }
 56 |     &.h2 {
 57 |       @include heading("H2");
 58 |     }
 59 |     &.h3 {
 60 |       @include heading("H3");
 61 |     }
 62 |     &.h4 {
 63 |       @include heading("H4");
 64 |     }
 65 |     &.h5 {
 66 |       @include heading("H5");
 67 |     }
 68 |     &.h6 {
 69 |       @include heading("H6");
 70 |     }
 71 | 
 72 |     --my-scroll-margin-top: var(--header-height);
 73 |     scroll-margin-top: var(--my-scroll-margin-top);
 74 | 
 75 |     a {
 76 |       opacity: 0; // Hide the <a> element by default
 77 |       margin-left: $gap-anchor-Heading;
 78 |       color: $color-anchor-Heading;
 79 |       transition: opacity 0.2s ease-in-out; // Smooth transition for visibility
 80 |     }
 81 | 
 82 |     &:hover {
 83 |       a {
 84 |         opacity: 1;
 85 |         text-decoration: $textDecorationLine-anchor-Heading;
 86 |       }
 87 |     }
 88 |   }
 89 | 
 90 |   .anchorRef {
 91 |     width: 0;
 92 |     height: 0;
 93 |     --my-scroll-margin-top: var(--header-height);
 94 |     scroll-margin-top: var(--my-scroll-margin-top);
 95 |   }
 96 | 
 97 |   /*
 98 |   This is a Chromium based solution that is supported by most modern browsers.
 99 |   See this source for details: https://css-tricks.com/line-clampin/
100 |   */
101 |   .truncateOverflow {
102 |     overflow: hidden;
103 |     text-overflow: ellipsis;
104 |     white-space: nowrap;
105 |   }
106 | 
107 |   .preserveLinebreaks {
108 |     white-space: pre-wrap;
109 |   }
110 | 
111 |   .noEllipsis {
112 |     text-overflow: clip;
113 |   }
114 | }
115 | 
116 | 
117 | // --- We export the theme variables to add them to the component renderer
118 | :export {
119 |   themeVars: t.json-stringify($themeVars);
120 | }
121 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/NestedApp/NestedApp.tsx:
--------------------------------------------------------------------------------

```typescript
  1 | import styles from "./NestedApp.module.scss";
  2 | 
  3 | import { createComponentRenderer } from "../../components-core/renderers";
  4 | import { parseScssVar } from "../../components-core/theming/themeVars";
  5 | import { IndexAwareNestedApp } from "./NestedAppNative";
  6 | import { defaultProps } from "./defaultProps";
  7 | import { createMetadata } from "../metadata-helpers";
  8 | 
  9 | const COMP = "NestedApp";
 10 | 
 11 | export const NestedAppMd = createMetadata({
 12 |   status: "stable",
 13 |   description: `The ${COMP} component allows you to nest an entire xmlui app into another one.
 14 | `,
 15 |   props: {
 16 |     app: {
 17 |       description: "The source markup of the app to be nested",
 18 |     },
 19 |     api: {
 20 |       description: "This property defines an optional emulated API to be used with the nested app.",
 21 |     },
 22 |     components: {
 23 |       description:
 24 |         "This property defines an optional list of components to be used with the nested app.",
 25 |       defaultValue: defaultProps.components,
 26 |     },
 27 |     config: {
 28 |       description: "You can define the nested app's configuration with this property.",
 29 |     },
 30 |     activeTheme: {
 31 |       description:
 32 |         "This property defines the active theme for the nested app. " +
 33 |         "If not set, the default theme is used.",
 34 |     },
 35 |     activeTone: {
 36 |       description:
 37 |         "This property defines the active tone for the nested app. " +
 38 |         "If not set, the default tone is used.",
 39 |     },
 40 |     height: {
 41 |       description:
 42 |         "The height of the nested app. If not set, the height is determined automatically.",
 43 |     },
 44 |   },
 45 |   themeVars: parseScssVar(styles.themeVars),
 46 |   defaultThemeVars: {
 47 |     [`marginTop-${COMP}`]: "$space-3",
 48 |     [`marginBottom-${COMP}`]: "$space-3",
 49 |     [`padding-${COMP}`]: "0",
 50 |     [`paddingTop-${COMP}`]: "0",
 51 |     [`border-${COMP}`]: "0.5px solid $borderColor",
 52 |     [`borderRadius-${COMP}`]: "$space-2",
 53 |     [`backgroundColor-frame-${COMP}`]: "$color-primary-50",
 54 |     [`gap-frame-${COMP}`]: "0",
 55 |     [`fontWeight-header-${COMP}`]: "$fontWeight-bold",
 56 |     [`boxShadow-${COMP}`]: "0px 0px 32px 0px rgba(0, 0, 0, 0.05)",
 57 |     [`backgroundColor-viewControls-${COMP}`]: "$color-primary-100",
 58 |     [`borderRadius-viewControls-${COMP}`]: "5px",
 59 |     [`padding-viewControls-${COMP}`]: "$space-0_5",
 60 |     [`borderBottom-header-${COMP}`]: "0.5px solid $borderColor",
 61 |     [`color-loadingText-${COMP}`]: "$color-surface-600",
 62 |     // --- Split view styles
 63 |     [`padding-button-splitView-${COMP}`]: "1px 6px",
 64 |     [`width-button-splitView-${COMP}`]: "60px",
 65 |     [`height-button-splitView-${COMP}`]: "19px",
 66 |     [`width-logo-splitView-${COMP}`]: "1.5rem",
 67 |     [`height-logo-splitView-${COMP}`]: "2rem",
 68 |     [`backgroundColor-button-splitView-${COMP}--active`]: "$color-surface-0",
 69 |     [`color-button-splitView-${COMP}`]: "$color-surface-600",
 70 |     [`color-button-splitView-${COMP}--active`]: "$color-primary",
 71 |     [`width-controls-${COMP}`]: "80px",
 72 |     [`backgroundColor-code-splitView-${COMP}`]: "$color-surface-0",
 73 |     [`borderRadius-button-splitView-${COMP}`]: "$space-1",
 74 |     [`borderColor-button-splitView-${COMP}`]: "transparent",
 75 |     dark: {
 76 |       [`backgroundColor-frame-${COMP}`]: "$color-surface-50",
 77 |       [`backgroundColor-button-splitView-${COMP}--active`]: "$color-surface-200",
 78 |       [`color-button-splitView-${COMP}`]: "$color-surface-500",
 79 |       [`color-button-splitView-${COMP}--active`]: "$color-surface-1",
 80 |     },
 81 |   },
 82 | });
 83 | 
 84 | export const nestedAppComponentRenderer = createComponentRenderer(
 85 |   COMP,
 86 |   NestedAppMd,
 87 |   ({ node, extractValue, className }) => {
 88 |     return (
 89 |       <IndexAwareNestedApp
 90 |         app={node.props?.app}
 91 |         className={className}
 92 |         api={extractValue(node.props?.api)}
 93 |         components={extractValue(node.props?.components)}
 94 |         config={extractValue(node.props?.config)}
 95 |         activeTheme={extractValue(node.props?.activeTheme)}
 96 |         activeTone={extractValue(node.props?.activeTone)}
 97 |         height={extractValue(node.props?.height)}
 98 |       />
 99 |     );
100 |   },
101 | );
102 | 
```

--------------------------------------------------------------------------------
/xmlui/bin/viteConfig.ts:
--------------------------------------------------------------------------------

```typescript
  1 | import { defineConfig } from "vite";
  2 | import type { UserConfig } from "vite";
  3 | import react from "@vitejs/plugin-react";
  4 | import svgr from "vite-plugin-svgr";
  5 | import { default as ViteYaml } from "@modyfi/vite-plugin-yaml";
  6 | import { default as ViteXmlui } from "./vite-xmlui-plugin";
  7 | import * as path from "path";
  8 | 
  9 | type ViteConfigData = {
 10 |   flatDist?: boolean;
 11 |   withRelativeRoot?: boolean;
 12 |   flatDistUiPrefix?: string;
 13 | };
 14 | 
 15 | export async function getViteConfig({
 16 |   flatDist = false,
 17 |   withRelativeRoot = false,
 18 |   flatDistUiPrefix = "",
 19 | }: ViteConfigData = {}) {
 20 |   //TODO finish this (merge smart)
 21 |   let overrides: UserConfig = {};
 22 |   try {
 23 |     const configOverrides = await import(process.cwd() + `/vite.config-overrides`);
 24 |     overrides = configOverrides.default || {};
 25 |   } catch (e) {
 26 |     // console.error(e);
 27 |   }
 28 | 
 29 |   return defineConfig({
 30 |     plugins: [react(), svgr(), ViteYaml(), ViteXmlui({}), ...(overrides.plugins || [])],
 31 |     base: withRelativeRoot ? "" : undefined,
 32 |     // experimental: {
 33 |     //   renderBuiltUrl: (filename, {type, hostType, hostId}) =>{
 34 |     //     if (type === 'asset') {
 35 |     //       // return { runtime: `window.__toCdnUrl(${JSON.stringify(filename)})` }
 36 |     //       return 'https://static.themohoz.com/xmlui/v0.31/' + filename
 37 |     //     } else {
 38 |     //       return { relative: true }
 39 |     //     }
 40 |     //   }
 41 |     // },
 42 |     define: overrides.define,
 43 |     resolve: {
 44 |       alias: overrides.resolve?.alias,
 45 |       extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.xmlui', '.xmlui.xs', '.xs', ...(overrides.resolve?.extensions || [])],
 46 |     },
 47 |     css: overrides.css,
 48 |     optimizeDeps: {
 49 |       extensions: ['.xmlui', '.xmlui.xs', '.xs'],
 50 |       ...overrides.optimizeDeps,
 51 |     },
 52 |     build: {
 53 |       rollupOptions: {
 54 |         input: path.resolve(process.cwd(), "index.html"),
 55 |         output: {
 56 |           assetFileNames: (assetInfo) => {
 57 |             const extType = assetInfo.name?.split(".").pop();
 58 |             if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType!)) {
 59 |               return flatDist
 60 |                 ? `${flatDistUiPrefix}internal_img_[name].[hash][extname]`
 61 |                 : `internal/img/[name].[hash][extname]`;
 62 |             }
 63 |             if (assetInfo.name === "index.css") {
 64 |               return flatDist
 65 |                 ? `${flatDistUiPrefix}internal_[name].[hash][extname]`
 66 |                 : `internal/[name].[hash][extname]`;
 67 |             }
 68 |             return flatDist
 69 |               ? `${flatDistUiPrefix}internal_chunks_[name].[hash][extname]`
 70 |               : `internal/chunks/[name].[hash][extname]`;
 71 |           },
 72 |           chunkFileNames: flatDist
 73 |             ? `${flatDistUiPrefix}internal_chunks_[name].[hash].js`
 74 |             : "internal/chunks/[name].[hash].js",
 75 |           entryFileNames: flatDist
 76 |             ? `${flatDistUiPrefix}internal_[name].[hash].js`
 77 |             : "internal/[name].[hash].js",
 78 |         },
 79 |         // treeshake: {
 80 |         //   preset: "recommended",
 81 |         //   moduleSideEffects: (id: string, external: boolean)=>{
 82 |         //     if(id.includes(path.resolve(process.cwd(), 'index.html'))){   //otherwise tree shaking doesn't work
 83 |         //       return true;
 84 |         //     }
 85 |         //     if(id.includes(path.resolve(process.cwd(), "src", 'main.tsx'))){   //otherwise tree shaking doesn't work
 86 |         //       return true;
 87 |         //     }
 88 |         //     return false;
 89 |         //   }
 90 |         // }
 91 |         //   assetFileNames: (assetInfo) => {
 92 |         //     let extType = assetInfo.name?.split(".").pop();
 93 |         //     if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType!)) {
 94 |         //       return `img/[name][extname]`;
 95 |         //     }
 96 |         //     if (assetInfo.name === "index.css") {
 97 |         //       return `[name][extname]`;
 98 |         //     }
 99 |         //     return `chunks/[name][extname]`;
100 |         //   },
101 |         //   chunkFileNames: "chunks/[name].js",
102 |         //   entryFileNames: "[name].js",
103 |         // },
104 |       },
105 |     },
106 |   });
107 | }
108 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Link/Link.tsx:
--------------------------------------------------------------------------------

```typescript
  1 | import styles from "./Link.module.scss";
  2 | 
  3 | import { createComponentRenderer } from "../../components-core/renderers";
  4 | import { parseScssVar } from "../../components-core/theming/themeVars";
  5 | import { createMetadata, d, dEnabled, dLabel } from "../metadata-helpers";
  6 | import { LinkTargetMd } from "../abstractions";
  7 | import { LinkNative, defaultProps } from "./LinkNative";
  8 | 
  9 | const COMP = "Link";
 10 | 
 11 | export const LinkMd = createMetadata({
 12 |   status: "stable",
 13 |   description:
 14 |     "`Link` creates clickable navigation elements for internal app routes or " +
 15 |     "external URLs. You can use the `label` and `icon` properties for simple text " +
 16 |     "links, or embed custom components like buttons, cards, or complex layouts " +
 17 |     "for rich interactive link presentations.",
 18 |   props: {
 19 |     to: d(
 20 |       "This property defines the URL of the link. If the value is not defined, the link cannot be activated.",
 21 |     ),
 22 |     enabled: dEnabled(),
 23 |     active: {
 24 |       description: `Indicates whether this link is active or not. If so, it will have a distinct visual appearance.`,
 25 |       type: "boolean",
 26 |       defaultValue: defaultProps.active,
 27 |     },
 28 |     target: {
 29 |       description:
 30 |         `This property specifies where to open the link represented by the \`${COMP}\`. This ` +
 31 |         `property accepts the following values (in accordance with the HTML standard):`,
 32 |       availableValues: LinkTargetMd,
 33 |       type: "string",
 34 |     },
 35 |     label: dLabel(),
 36 |     icon: d(
 37 |       `This property allows you to add an optional icon (specify the icon's name) to the link.`,
 38 |     ),
 39 |   },
 40 |   events: {
 41 |     click: {
 42 |       description: "This event is triggered when the link is clicked."
 43 |     }
 44 |   },
 45 |   themeVars: parseScssVar(styles.themeVars),
 46 |   themeVarDescriptions: {
 47 |     [`gap-icon-${COMP}`]:
 48 |       "This property defines the size of the gap between the icon and the label.",
 49 |   },
 50 |   defaultThemeVars: {
 51 |     [`border-${COMP}`]: "0px solid $borderColor",
 52 |     [`textColor-${COMP}`]: "$color-primary-500",
 53 |     [`textDecorationColor-${COMP}`]: `textDecorationColor-${COMP}`,
 54 |     [`textColor-${COMP}--hover`]: `$color-primary-400`,
 55 |     [`textDecorationColor-${COMP}--hover`]: `textColor-${COMP}--hover`,
 56 |     [`textColor-${COMP}--active`]: "$color-primary-400",
 57 |     [`textDecorationColor-${COMP}--active`]: `textColor-${COMP}--active`,
 58 |     [`textColor-${COMP}--hover--active`]: `$textColor-${COMP}--active`,
 59 |     [`textUnderlineOffset-${COMP}`]: "$space-1",
 60 |     [`textDecorationLine-${COMP}`]: "underline",
 61 |     [`textDecorationStyle-${COMP}`]: "solid",
 62 |     [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",
 63 |     [`outlineWidth-${COMP}--focus`]: "$outlineWidth--focus",
 64 |     [`outlineStyle-${COMP}--focus`]: "$outlineStyle--focus",
 65 |     [`outlineOffset-${COMP}--focus`]: "$outlineOffset--focus",
 66 |     [`fontSize-${COMP}`]: "inherit",
 67 |     [`fontWeight-${COMP}--active`]: "$fontWeight-bold",
 68 |     [`gap-icon-${COMP}`]: "$gap-tight",
 69 |     [`padding-icon-${COMP}`]: "$space-0_5",
 70 |     dark: {
 71 |       [`textColor-${COMP}`]: "$color-primary-600",
 72 |       [`textColor-${COMP}--hover`]: `$color-primary-500`,
 73 |       [`textColor-${COMP}--active`]: "$color-primary-500",
 74 |     }
 75 |   },
 76 | });
 77 | 
 78 | /**
 79 |  * This function define the renderer for the Limk component.
 80 |  */
 81 | export const localLinkComponentRenderer = createComponentRenderer(
 82 |   COMP,
 83 |   LinkMd,
 84 |   ({ node, extractValue, renderChild, lookupEventHandler, className }) => {
 85 |     return (
 86 |       <LinkNative
 87 |         to={extractValue(node.props.to)}
 88 |         icon={extractValue(node.props.icon)}
 89 |         active={extractValue.asOptionalBoolean(node.props.active, false)}
 90 |         target={extractValue(node.props?.target)}
 91 |         className={className}
 92 |         disabled={!extractValue.asOptionalBoolean(node.props.enabled ?? true)}
 93 |         onClick={lookupEventHandler("click")}
 94 |       >
 95 |         {node.props.label
 96 |           ? extractValue.asDisplayText(node.props.label)
 97 |           : renderChild(node.children)}
 98 |       </LinkNative>
 99 |     );
100 |   },
101 | );
102 | 
```

